From 3a48cd80478eda30857289ed76a8eca2c2bfd949 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 5 Aug 2024 11:40:24 +0200 Subject: [PATCH] chore: :fire: Remove react-old (`@digdir/design-system-react`) (#2200) Remove deprecated package as its interfering with changesets, upgrades and builds now. Made a separate branch [react-old](https://github.com/digdir/designsystemet/tree/react-old) to keep archive. --- .changeset/config.json | 1 - .changeset/pre.json | 1 - biome.jsonc | 3 +- packages/react-old/CHANGELOG.md | 899 ----------------- packages/react-old/README.md | 9 - packages/react-old/declarations.d.ts | 22 - packages/react-old/package.json | 46 - packages/react-old/rollup.config.js | 52 - packages/react-old/scripts/name.d.ts | 5 - packages/react-old/scripts/name.js | 24 - packages/react-old/src/components/index.ts | 13 - .../legacy/LegacyCheckbox/Checkbox.mdx | 75 -- .../legacy/LegacyCheckbox/Checkbox.module.css | 64 -- .../LegacyCheckbox/Checkbox.stories.tsx | 109 -- .../legacy/LegacyCheckbox/Checkbox.test.tsx | 163 --- .../legacy/LegacyCheckbox/Checkbox.tsx | 110 -- .../components/legacy/LegacyCheckbox/index.ts | 1 - .../CheckboxGroup.module.css | 22 - .../CheckboxGroup.stories.mdx | 176 ---- .../CheckboxGroup.test.tsx | 169 ---- .../LegacyCheckboxGroup/CheckboxGroup.tsx | 148 --- .../legacy/LegacyCheckboxGroup/index.ts | 1 - .../legacy/LegacyFieldSet/FieldSet.mdx | 52 - .../legacy/LegacyFieldSet/FieldSet.module.css | 71 -- .../LegacyFieldSet/FieldSet.stories.tsx | 28 - .../legacy/LegacyFieldSet/FieldSet.test.tsx | 123 --- .../legacy/LegacyFieldSet/FieldSet.tsx | 104 -- .../components/legacy/LegacyFieldSet/index.ts | 1 - .../legacy/LegacyPopover/Popover.module.css | 79 -- .../legacy/LegacyPopover/Popover.stories.mdx | 154 --- .../legacy/LegacyPopover/Popover.test.tsx | 129 --- .../legacy/LegacyPopover/Popover.tsx | 257 ----- .../components/legacy/LegacyPopover/index.ts | 2 - .../LegacyRadioButton/RadioButton.module.css | 63 -- .../LegacyRadioButton/RadioButton.stories.mdx | 238 ----- .../LegacyRadioButton/RadioButton.test.tsx | 205 ---- .../legacy/LegacyRadioButton/RadioButton.tsx | 82 -- .../legacy/LegacyRadioButton/index.ts | 1 - .../LegacyRadioGroup/RadioGroup.module.css | 24 - .../LegacyRadioGroup/RadioGroup.stories.mdx | 190 ---- .../LegacyRadioGroup/RadioGroup.test.tsx | 243 ----- .../legacy/LegacyRadioGroup/RadioGroup.tsx | 112 --- .../legacy/LegacyRadioGroup/index.ts | 1 - .../LegacyResponsiveTable/ExampleData.ts | 82 -- .../ResponsiveTable.stories.mdx | 81 -- .../LegacyResponsiveTable/ResponsiveTable.tsx | 230 ----- .../Table.stories.module.css | 4 - .../legacy/LegacyResponsiveTable/index.ts | 5 - .../LegacySelect/MultiSelect.stories.mdx | 388 ------- .../MultiSelectItem.module.css | 40 - .../MultiSelectItem/MultiSelectItem.test.tsx | 53 - .../MultiSelectItem/MultiSelectItem.tsx | 34 - .../LegacySelect/MultiSelectItem/index.ts | 1 - .../LegacySelect/OptionList/Option.test.tsx | 64 -- .../legacy/LegacySelect/OptionList/Option.tsx | 55 - .../OptionList/OptionList.module.css | 74 -- .../OptionList/OptionList.test.tsx | 104 -- .../LegacySelect/OptionList/OptionList.tsx | 100 -- .../legacy/LegacySelect/OptionList/index.ts | 1 - .../legacy/LegacySelect/Select.module.css | 185 ---- .../legacy/LegacySelect/Select.test.tsx | 948 ------------------ .../components/legacy/LegacySelect/Select.tsx | 447 --------- .../LegacySelect/SingleSelect.stories.mdx | 355 ------- .../components/legacy/LegacySelect/index.ts | 8 - .../components/legacy/LegacySelect/types.ts | 49 - .../legacy/LegacySelect/utils.test.ts | 62 -- .../components/legacy/LegacySelect/utils.ts | 23 - .../legacy/LegacyTable/ExampleData.ts | 82 -- .../legacy/LegacyTable/SortIcon.tsx | 16 - .../legacy/LegacyTable/Table.module.css | 10 - .../legacy/LegacyTable/Table.stories.mdx | 76 -- .../LegacyTable/Table.stories.module.css | 4 - .../legacy/LegacyTable/Table.test.tsx | 60 -- .../components/legacy/LegacyTable/Table.tsx | 34 - .../legacy/LegacyTable/TableBody.module.css | 6 - .../legacy/LegacyTable/TableBody.tsx | 27 - .../legacy/LegacyTable/TableCell.module.css | 75 -- .../legacy/LegacyTable/TableCell.tsx | 148 --- .../legacy/LegacyTable/TableFooter.module.css | 6 - .../legacy/LegacyTable/TableFooter.tsx | 27 - .../legacy/LegacyTable/TableHeader.module.css | 6 - .../legacy/LegacyTable/TableHeader.tsx | 27 - .../legacy/LegacyTable/TableRow.module.css | 16 - .../legacy/LegacyTable/TableRow.tsx | 56 -- .../components/legacy/LegacyTable/index.ts | 17 - .../components/legacy/LegacyTable/utils.ts | 50 - .../src/components/legacy/LegacyTabs/Tabs.mdx | 57 -- .../legacy/LegacyTabs/Tabs.module.css | 76 -- .../legacy/LegacyTabs/Tabs.stories.tsx | 90 -- .../legacy/LegacyTabs/Tabs.test.tsx | 332 ------ .../src/components/legacy/LegacyTabs/Tabs.tsx | 141 --- .../src/components/legacy/LegacyTabs/index.ts | 2 - .../legacy/LegacyTextArea/TextArea.mdx | 67 -- .../legacy/LegacyTextArea/TextArea.module.css | 20 - .../LegacyTextArea/TextArea.stories.tsx | 62 -- .../legacy/LegacyTextArea/TextArea.test.tsx | 92 -- .../legacy/LegacyTextArea/TextArea.tsx | 96 -- .../components/legacy/LegacyTextArea/index.ts | 2 - .../legacy/LegacyTextField/TextField.mdx | 75 -- .../LegacyTextField/TextField.stories.tsx | 70 -- .../legacy/LegacyTextField/TextField.test.tsx | 311 ------ .../legacy/LegacyTextField/TextField.tsx | 230 ----- .../legacy/LegacyTextField/index.ts | 5 - .../ToggleButtonGroup.module.css | 44 - .../ToggleButtonGroup.stories.mdx | 44 - .../ToggleButtonGroup.test.tsx | 127 --- .../ToggleButtonGroup.tsx | 90 -- .../legacy/LegacyToggleButtonGroup/index.ts | 5 - .../CheckboxRadioTemplate.module.css | 90 -- .../CheckboxRadioTemplate.test.tsx | 93 -- .../CheckboxRadioTemplate.tsx | 168 ---- .../legacy/_CheckboxRadioTemplate/index.ts | 2 - packages/react-old/src/hooks/index.ts | 7 - .../src/hooks/useEventListener.test.ts | 40 - .../react-old/src/hooks/useEventListener.ts | 21 - .../src/hooks/useFocusWithin.test.tsx | 42 - .../react-old/src/hooks/useFocusWithin.ts | 21 - .../src/hooks/useIsomorphicLayoutEffect.ts | 4 - .../hooks/useKeyboardEventListener.test.ts | 40 - .../src/hooks/useKeyboardEventListener.ts | 24 - .../react-old/src/hooks/useMediaQuery.test.ts | 61 -- packages/react-old/src/hooks/useMediaQuery.ts | 27 - .../react-old/src/hooks/usePrevious.test.ts | 25 - packages/react-old/src/hooks/usePrevious.ts | 9 - .../hooks/useSynchronizedAnimation.test.ts | 43 - .../src/hooks/useSynchronizedAnimation.ts | 44 - .../react-old/src/hooks/useUpdate.test.ts | 26 - packages/react-old/src/hooks/useUpdate.ts | 14 - packages/react-old/src/index.ts | 2 - .../src/types/OverridableComponent.ts | 24 - packages/react-old/src/types/Portal.ts | 8 - .../AnimateHeight/AnimateHeight.module.css | 13 - .../AnimateHeight/AnimateHeight.test.tsx | 100 -- .../utilities/AnimateHeight/AnimateHeight.tsx | 73 -- .../src/utilities/AnimateHeight/index.ts | 2 - .../src/utilities/InputWrapper/ErrorIcon.tsx | 14 - .../utilities/InputWrapper/Icon.module.css | 15 - .../src/utilities/InputWrapper/Icon.test.tsx | 25 - .../src/utilities/InputWrapper/Icon.tsx | 36 - .../InputWrapper/InputWrapper.module.css | 91 -- .../InputWrapper/InputWrapper.test.tsx | 277 ----- .../utilities/InputWrapper/InputWrapper.tsx | 230 ----- .../src/utilities/InputWrapper/README.md | 3 - .../src/utilities/InputWrapper/SearchIcon.tsx | 14 - .../src/utilities/InputWrapper/index.ts | 3 - .../src/utilities/InputWrapper/utils.test.ts | 54 - .../src/utilities/InputWrapper/utils.ts | 58 -- .../RovingTabIndex/RovingTabindexItem.tsx | 83 -- .../RovingTabindexRoot.test.tsx | 82 -- .../RovingTabIndex/RovingTabindexRoot.tsx | 121 --- .../src/utilities/RovingTabIndex/index.ts | 7 - .../RovingTabIndex/useRovingTabindex.ts | 46 - .../src/utilities/arrayUtils.test.ts | 88 -- .../react-old/src/utilities/arrayUtils.ts | 20 - .../src/utilities/compareFunctions.test.ts | 110 -- .../src/utilities/compareFunctions.ts | 67 -- packages/react-old/src/utilities/index.ts | 6 - .../src/utilities/numberFormat.test.tsx | 51 - .../react-old/src/utilities/numberFormat.ts | 30 - .../src/utilities/objectUtils.test.ts | 44 - .../react-old/src/utilities/objectUtils.ts | 45 - .../react-old/src/utilities/sortUtils.test.ts | 35 - packages/react-old/src/utilities/sortUtils.ts | 29 - .../src/utilities/stringUtils.test.ts | 115 --- .../react-old/src/utilities/stringUtils.ts | 48 - .../react-old/src/utilities/useDebounce.ts | 30 - .../src/utilities/utility.module.css | 24 - packages/react-old/tsconfig.build.json | 4 - packages/react-old/tsconfig.json | 13 - yarn.lock | 188 +--- 170 files changed, 55 insertions(+), 13520 deletions(-) delete mode 100644 packages/react-old/CHANGELOG.md delete mode 100644 packages/react-old/README.md delete mode 100644 packages/react-old/declarations.d.ts delete mode 100644 packages/react-old/package.json delete mode 100644 packages/react-old/rollup.config.js delete mode 100644 packages/react-old/scripts/name.d.ts delete mode 100644 packages/react-old/scripts/name.js delete mode 100644 packages/react-old/src/components/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.stories.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckbox/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyCheckboxGroup/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyFieldSet/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyPopover/Popover.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyPopover/Popover.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyPopover/Popover.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyPopover/Popover.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyPopover/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioButton/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyRadioGroup/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyResponsiveTable/ExampleData.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyResponsiveTable/Table.stories.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyResponsiveTable/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/MultiSelect.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/Option.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/Option.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/OptionList.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/OptionList.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/OptionList.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/OptionList/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/Select.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/Select.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/Select.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/SingleSelect.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/types.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/utils.test.ts delete mode 100644 packages/react-old/src/components/legacy/LegacySelect/utils.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/ExampleData.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/SortIcon.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/Table.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/Table.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/Table.stories.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/Table.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/Table.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableBody.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableBody.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableCell.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableCell.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableFooter.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableFooter.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableHeader.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableHeader.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableRow.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/TableRow.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTable/utils.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/Tabs.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/Tabs.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/Tabs.stories.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/Tabs.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/Tabs.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTabs/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/TextArea.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/TextArea.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/TextArea.stories.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/TextArea.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/TextArea.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextArea/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyTextField/TextField.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextField/TextField.stories.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextField/TextField.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextField/TextField.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyTextField/index.ts delete mode 100644 packages/react-old/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.module.css delete mode 100644 packages/react-old/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.stories.mdx delete mode 100644 packages/react-old/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.test.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyToggleButtonGroup/ToggleButtonGroup.tsx delete mode 100644 packages/react-old/src/components/legacy/LegacyToggleButtonGroup/index.ts delete mode 100644 packages/react-old/src/components/legacy/_CheckboxRadioTemplate/CheckboxRadioTemplate.module.css delete mode 100644 packages/react-old/src/components/legacy/_CheckboxRadioTemplate/CheckboxRadioTemplate.test.tsx delete mode 100644 packages/react-old/src/components/legacy/_CheckboxRadioTemplate/CheckboxRadioTemplate.tsx delete mode 100644 packages/react-old/src/components/legacy/_CheckboxRadioTemplate/index.ts delete mode 100644 packages/react-old/src/hooks/index.ts delete mode 100644 packages/react-old/src/hooks/useEventListener.test.ts delete mode 100644 packages/react-old/src/hooks/useEventListener.ts delete mode 100644 packages/react-old/src/hooks/useFocusWithin.test.tsx delete mode 100644 packages/react-old/src/hooks/useFocusWithin.ts delete mode 100644 packages/react-old/src/hooks/useIsomorphicLayoutEffect.ts delete mode 100644 packages/react-old/src/hooks/useKeyboardEventListener.test.ts delete mode 100644 packages/react-old/src/hooks/useKeyboardEventListener.ts delete mode 100644 packages/react-old/src/hooks/useMediaQuery.test.ts delete mode 100644 packages/react-old/src/hooks/useMediaQuery.ts delete mode 100644 packages/react-old/src/hooks/usePrevious.test.ts delete mode 100644 packages/react-old/src/hooks/usePrevious.ts delete mode 100644 packages/react-old/src/hooks/useSynchronizedAnimation.test.ts delete mode 100644 packages/react-old/src/hooks/useSynchronizedAnimation.ts delete mode 100644 packages/react-old/src/hooks/useUpdate.test.ts delete mode 100644 packages/react-old/src/hooks/useUpdate.ts delete mode 100644 packages/react-old/src/index.ts delete mode 100644 packages/react-old/src/types/OverridableComponent.ts delete mode 100644 packages/react-old/src/types/Portal.ts delete mode 100644 packages/react-old/src/utilities/AnimateHeight/AnimateHeight.module.css delete mode 100644 packages/react-old/src/utilities/AnimateHeight/AnimateHeight.test.tsx delete mode 100644 packages/react-old/src/utilities/AnimateHeight/AnimateHeight.tsx delete mode 100644 packages/react-old/src/utilities/AnimateHeight/index.ts delete mode 100644 packages/react-old/src/utilities/InputWrapper/ErrorIcon.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/Icon.module.css delete mode 100644 packages/react-old/src/utilities/InputWrapper/Icon.test.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/Icon.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/InputWrapper.module.css delete mode 100644 packages/react-old/src/utilities/InputWrapper/InputWrapper.test.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/InputWrapper.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/README.md delete mode 100644 packages/react-old/src/utilities/InputWrapper/SearchIcon.tsx delete mode 100644 packages/react-old/src/utilities/InputWrapper/index.ts delete mode 100644 packages/react-old/src/utilities/InputWrapper/utils.test.ts delete mode 100644 packages/react-old/src/utilities/InputWrapper/utils.ts delete mode 100644 packages/react-old/src/utilities/RovingTabIndex/RovingTabindexItem.tsx delete mode 100644 packages/react-old/src/utilities/RovingTabIndex/RovingTabindexRoot.test.tsx delete mode 100644 packages/react-old/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx delete mode 100644 packages/react-old/src/utilities/RovingTabIndex/index.ts delete mode 100644 packages/react-old/src/utilities/RovingTabIndex/useRovingTabindex.ts delete mode 100644 packages/react-old/src/utilities/arrayUtils.test.ts delete mode 100644 packages/react-old/src/utilities/arrayUtils.ts delete mode 100644 packages/react-old/src/utilities/compareFunctions.test.ts delete mode 100644 packages/react-old/src/utilities/compareFunctions.ts delete mode 100644 packages/react-old/src/utilities/index.ts delete mode 100644 packages/react-old/src/utilities/numberFormat.test.tsx delete mode 100644 packages/react-old/src/utilities/numberFormat.ts delete mode 100644 packages/react-old/src/utilities/objectUtils.test.ts delete mode 100644 packages/react-old/src/utilities/objectUtils.ts delete mode 100644 packages/react-old/src/utilities/sortUtils.test.ts delete mode 100644 packages/react-old/src/utilities/sortUtils.ts delete mode 100644 packages/react-old/src/utilities/stringUtils.test.ts delete mode 100644 packages/react-old/src/utilities/stringUtils.ts delete mode 100644 packages/react-old/src/utilities/useDebounce.ts delete mode 100644 packages/react-old/src/utilities/utility.module.css delete mode 100644 packages/react-old/tsconfig.build.json delete mode 100644 packages/react-old/tsconfig.json diff --git a/.changeset/config.json b/.changeset/config.json index 6ec1528d5f..963940928e 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -16,7 +16,6 @@ "storefront", "@repo/components", "@designsystemet/storybook", - "@digdir/design-system-react", "figma-plugin", "@digdir/create-tokens" ] diff --git a/.changeset/pre.json b/.changeset/pre.json index 603e2e0de0..489364096e 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -10,7 +10,6 @@ "@digdir/create-tokens": "0.1.0-alpha.7", "@digdir/designsystemet-css": "0.11.0-alpha.9", "@digdir/designsystemet-react": "1.0.0-rc.13", - "@digdir/design-system-react": "0.54.0", "@digdir/designsystemet-theme": "1.0.0-rc.13", "figma-plugin": "0.1.0", "@designsystemet/storybook": "0.1.0" diff --git a/biome.jsonc b/biome.jsonc index 55dbb7b655..1d85a15174 100644 --- a/biome.jsonc +++ b/biome.jsonc @@ -14,8 +14,7 @@ "tsc-build/**", "design-tokens/**/*", "packages/theme/brand/**/*", - "apps/storefront/tokens/**", - "packages/react-old/**/*" + "apps/storefront/tokens/**" ] }, "formatter": { diff --git a/packages/react-old/CHANGELOG.md b/packages/react-old/CHANGELOG.md deleted file mode 100644 index c6732bc442..0000000000 --- a/packages/react-old/CHANGELOG.md +++ /dev/null @@ -1,899 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [0.54.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.12...@digdir/design-system-react@0.54.0) (2024-06-07) - -### Features - -- :heavy_minus_sign: Remove re-export of `@digdir/designsystemet-react` components ([#2114](https://github.com/digdir/designsystemet/issues/2114)) ([bc46492](https://github.com/digdir/designsystemet/commit/bc464924590ec64ecdac1af48ec3e2588cca2466)) - -### BREAKING CHANGES - -- Removes re-export of components from - `@digdir/designsystemet-react` - -## [0.53.12](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.11...@digdir/design-system-react@0.53.12) (2024-05-24) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.11](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.10...@digdir/design-system-react@0.53.11) (2024-05-16) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.10](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.9...@digdir/design-system-react@0.53.10) (2024-05-14) - -### Bug Fixes - -- **Combobox:** Improve performance ([#1771](https://github.com/digdir/designsystemet/issues/1771)) ([18cdd17](https://github.com/digdir/designsystemet/commit/18cdd17c71a49bbae88ade3e2b925dd28f17acb3)) - -## [0.53.10-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.10-alpha.0...@digdir/design-system-react@0.53.10-alpha.1) (2024-04-26) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.10-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.9...@digdir/design-system-react@0.53.10-alpha.0) (2024-04-24) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.9](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.8...@digdir/design-system-react@0.53.9) (2024-04-23) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.8](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.7...@digdir/design-system-react@0.53.8) (2024-04-22) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.7](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.7-alpha.2...@digdir/design-system-react@0.53.7) (2024-04-15) - -### Bug Fixes - -- Check if `window` is defined in `AnimateHeight` ([06875a4](https://github.com/digdir/designsystemet/commit/06875a4ab37289c5417ac571336b2ffe6fc81bd7)) - -## [0.53.7-alpha.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.7-alpha.1...@digdir/design-system-react@0.53.7-alpha.2) (2024-04-10) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.7-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.7-alpha.0...@digdir/design-system-react@0.53.7-alpha.1) (2024-04-10) - -### Bug Fixes - -- Check if `window` is defined in `AnimateHeight` ([06875a4](https://github.com/digdir/designsystemet/commit/06875a4ab37289c5417ac571336b2ffe6fc81bd7)) - -## [0.53.7-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.6...@digdir/design-system-react@0.53.7-alpha.0) (2024-04-09) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.6](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.5...@digdir/design-system-react@0.53.6) (2024-04-08) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.5](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.4...@digdir/design-system-react@0.53.5) (2024-04-08) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.4](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.2...@digdir/design-system-react@0.53.4) (2024-04-04) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.3](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.2...@digdir/design-system-react@0.53.3) (2024-03-21) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.1...@digdir/design-system-react@0.53.2) (2024-03-20) - -**Note:** Version bump only for package @digdir/design-system-react - -## [0.53.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.53.0...@digdir/design-system-react@0.53.1) (2024-03-13) - -**Note:** Version bump only for package @digdir/design-system-react - -# [0.53.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.51.3...@digdir/design-system-react@0.53.0) (2024-03-13) - -**Note:** Version bump only for package @digdir/design-system-react - -### BREAKING CHANGE: Package restructure - -## [0.51.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.51.0...@digdir/design-system-react@0.51.1) (2024-02-23) - -### Bug Fixes - -- **Button:** Remove `display: inline-block` for icons ([#1567](https://github.com/digdir/designsystemet/issues/1567)) ([40183b6](https://github.com/digdir/designsystemet/commit/40183b64ae4e53004623aecc397a99f0c5e865c8)) -- **HelpText:** :bug: Focus and hover should now be correct ([#1568](https://github.com/digdir/designsystemet/issues/1568)) ([2505554](https://github.com/digdir/designsystemet/commit/2505554a87a982000f1980974b4683921726b79e)) - -### Features - -- **Combobox:** Add loading state ([#1558](https://github.com/digdir/designsystemet/issues/1558)) ([635d3cc](https://github.com/digdir/designsystemet/commit/635d3cc8fdceffe125ce738c71b3605f95db2b69)) - -### Reverts - -- Revert "Publish" ([b1d5e6c](https://github.com/digdir/designsystemet/commit/b1d5e6c9f0b0be47592fd3048e175a67894eb1e1)) - -# [0.51.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.50.0...@digdir/design-system-react@0.51.0) (2024-02-23) - -### Features - -- **Combobox:** Add `forwardRef` to input ([#1553](https://github.com/digdir/designsystemet/issues/1553)) ([efc3f2c](https://github.com/digdir/designsystemet/commit/efc3f2c967bc7e17ad236c9ac6512a7661f32ed2)) - -- **Combobox:** Always display selected values ([#1562](https://github.com/digdir/designsystemet/issues/1562)) ([3b5bbc3](https://github.com/digdir/designsystemet/commit/3b5bbc3b8d471f674e0ab5155fe65e90a51090fc)) -- **Modal:** Make sub-components composable ([#1556](https://github.com/digdir/designsystemet/issues/1556)) ([e0159ae](https://github.com/digdir/designsystemet/commit/e0159ae97eeb8e74d5e5ea1ff67b12746cd313b6)) -- **Pagination:** Add new component API ([#1524](https://github.com/digdir/designsystemet/issues/1524)) ([b43ee0d](https://github.com/digdir/designsystemet/commit/b43ee0d5ca84eda4f232c77ee623e9fcdd15b2b0)) - -# [0.50.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.49.0...@digdir/design-system-react@0.50.0) (2024-02-19) - -### Bug Fixes - -- Correct component names in React developer tools ([#1543](https://github.com/digdir/designsystemet/issues/1543)) ([889e91d](https://github.com/digdir/designsystemet/commit/889e91d4acaaa470f10aabfc17657ca5d5477b6a)) -- **Paragraph:** Fix CSS specificity ([#1527](https://github.com/digdir/designsystemet/issues/1527)) ([4d76d87](https://github.com/digdir/designsystemet/commit/4d76d875960f9cb544bbb33735a0d8685f8ceee5)) -- **Switch:** 🐛 Improvements and adjustments to styling ([#1521](https://github.com/digdir/designsystemet/issues/1521)) ([d9f7a5c](https://github.com/digdir/designsystemet/commit/d9f7a5ce5ee1e70346861a2dcb009b598541958b)) - -### Features - -- **Modal:** Add `Modal.Trigger` ([#1532](https://github.com/digdir/designsystemet/issues/1532)) ([15f7de0](https://github.com/digdir/designsystemet/commit/15f7de0f0d6368c624cb9825d0c35209848f71f9)) - -# [0.49.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.48.0...@digdir/design-system-react@0.49.0) (2024-02-09) - -### Bug Fixes - -- **List:** :bug: Should correctly set `aria-labelledby` ([#1508](https://github.com/digdir/designsystemet/issues/1508)) ([41ff47c](https://github.com/digdir/designsystemet/commit/41ff47c7f8060b753db739dabe07cf50fb75e73b)) - -### Features - -- **Checkbox:** Add indeterminate state ([#1513](https://github.com/digdir/designsystemet/issues/1513)) ([913857b](https://github.com/digdir/designsystemet/commit/913857b6da4748181990e658a894bfa79001e2a9)) -- **Combobox:** Debounce `Option` click ([#1506](https://github.com/digdir/designsystemet/issues/1506)) ([30ccbe7](https://github.com/digdir/designsystemet/commit/30ccbe7f79890892dffe089a4e456ce83ab74518)) -- **Heading:** Add two larger sizes ([#1512](https://github.com/digdir/designsystemet/issues/1512)) ([3d34248](https://github.com/digdir/designsystemet/commit/3d342484eaf74b9ad56c93e7b34b2b4d4169ce6c)) - -# [0.48.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.47.0...@digdir/design-system-react@0.48.0) (2024-02-07) - -### Bug Fixes - -- **Button:** :bug: Passed `className` should now override correctly ([#1442](https://github.com/digdir/designsystemet/issues/1442)) ([5a1d463](https://github.com/digdir/designsystemet/commit/5a1d463131f7c6e81a36b457b94eab33322412f7)) -- **Table:** :label: Fix types ([#1500](https://github.com/digdir/designsystemet/issues/1500)) ([c962f22](https://github.com/digdir/designsystemet/commit/c962f22b7b56a3bf980e6ccd747e8e0d30ac4325)) - -### Features - -- **Button:** Add `asChild` support to `Button` ([#1463](https://github.com/digdir/designsystemet/issues/1463)) ([87d43f6](https://github.com/digdir/designsystemet/commit/87d43f6ef612243f92ecf5a381b2063a1c2db913)) -- **Button:** Change `icon` to boolean and remove `iconPlacement` ([#1413](https://github.com/digdir/designsystemet/issues/1413)) ([98d0610](https://github.com/digdir/designsystemet/commit/98d06108e4e7954feac410178bf81abed3b5f6c5)) -- **Card:** Add support for changing element type with `asChild` ([#1323](https://github.com/digdir/designsystemet/issues/1323)) ([d35f56e](https://github.com/digdir/designsystemet/commit/d35f56ef5b2319859e0383b2d07dd6e4180f6a58)) -- **DropdownMenu:** Add `DropdownMenu.Trigger` ([#1416](https://github.com/digdir/designsystemet/issues/1416)) ([428b092](https://github.com/digdir/designsystemet/commit/428b0929d54d4b6d8cd155e0ab9dd27517299191)) -- **ErrorMessage:** Add `asChild` support to `ErrorMessage` ([#1467](https://github.com/digdir/designsystemet/issues/1467)) ([25ee917](https://github.com/digdir/designsystemet/commit/25ee917e1acbfbf3c4465141f4ac6f996ecc5bef)) -- **ErrorSummary:** ✨ Make the component ([#1392](https://github.com/digdir/designsystemet/issues/1392)) ([a33ff7c](https://github.com/digdir/designsystemet/commit/a33ff7c8077c1c07acc027de1b36fa9ad50ef77f)) -- **Heading:** Add `asChild` support to `Heading` ([#1459](https://github.com/digdir/designsystemet/issues/1459)) ([dda21d2](https://github.com/digdir/designsystemet/commit/dda21d2bf050538ca0b38418391cd14cf903aeb6)) -- **Ingress:** Add `asChild` support to `Ingress` ([#1460](https://github.com/digdir/designsystemet/issues/1460)) ([4f96d58](https://github.com/digdir/designsystemet/commit/4f96d58531726d2dd296a0772f061e7013726430)) -- **Label:** Add `asChild` support to `Label` ([#1461](https://github.com/digdir/designsystemet/issues/1461)) ([fa2e961](https://github.com/digdir/designsystemet/commit/fa2e961185d798039c1c54cc1e584dc75ca2a326)) -- **Link:** Add `asChild` support to `Link` ([#1458](https://github.com/digdir/designsystemet/issues/1458)) ([54b1dab](https://github.com/digdir/designsystemet/commit/54b1dab8cbed2c5ce4d1030b7465c761dc2a79b1)) -- **List:** Change component API ([#1400](https://github.com/digdir/designsystemet/issues/1400)) ([55d8795](https://github.com/digdir/designsystemet/commit/55d87951a270c8449216260cb70e61940fd71293)) -- **Paragraph:** Add `asChild` support to `Paragraph` ([#1462](https://github.com/digdir/designsystemet/issues/1462)) ([c886f65](https://github.com/digdir/designsystemet/commit/c886f652e7062e2bff7148cdc4603c851654a50d)) -- **Popover:** Add `Popover.Trigger` ([#1406](https://github.com/digdir/designsystemet/issues/1406)) ([33c693b](https://github.com/digdir/designsystemet/commit/33c693b7190253368d156273a17442e7603f83b2)) -- **RovingTabindexItem:** Add `asChild` support to `RovingTabindexItem` ([#1468](https://github.com/digdir/designsystemet/issues/1468)) ([8f21be3](https://github.com/digdir/designsystemet/commit/8f21be38dff97d8c1103547d651a77e80b537402)) -- **RovingTabindexRoot:** Add `asChild` support to `RovingTabindexRoot` ([#1469](https://github.com/digdir/designsystemet/issues/1469)) ([c766926](https://github.com/digdir/designsystemet/commit/c7669267312cd583d0e79f196822d4491dcd5bc8)) -- **Tabs:** Remove `icon` prop ([#1418](https://github.com/digdir/designsystemet/issues/1418)) ([75777db](https://github.com/digdir/designsystemet/commit/75777dbc963329ae4e2201de59304786bc6ef6ff)) - -# [0.47.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.46.1...@digdir/design-system-react@0.47.0) (2024-01-23) - -### Bug Fixes - -- **Accordion:** Fix focus style ([#1407](https://github.com/digdir/designsystemet/issues/1407)) ([24e3006](https://github.com/digdir/designsystemet/commit/24e3006de112ea7d667ec07f6c9caccd6e6de9f2)) -- **DropdownMenu:** Export correct props type for items ([#1410](https://github.com/digdir/designsystemet/issues/1410)) ([898a13f](https://github.com/digdir/designsystemet/commit/898a13f54cd825619190fb0a65f04c6ed23d77c6)) -- **List:** Add `margin-top` to nested lists ([#1402](https://github.com/digdir/designsystemet/issues/1402)) ([524d48c](https://github.com/digdir/designsystemet/commit/524d48c84aa7f6c8c3f2b05f374c1b70e8005053)) -- **Pagination:** Add default aria-label to `nav` ([#1401](https://github.com/digdir/designsystemet/issues/1401)) ([b4de3f1](https://github.com/digdir/designsystemet/commit/b4de3f1c166a91abda113cd0fd0d6d8ab36189da)) - -### Features - -- **List:** Add `forwardRef` ([#1393](https://github.com/digdir/designsystemet/issues/1393)) ([b8b6b3a](https://github.com/digdir/designsystemet/commit/b8b6b3a84792897be68d35aee9d9727514641763)) -- **List:** Add support for custom heading id ([#1394](https://github.com/digdir/designsystemet/issues/1394)) ([03e1dba](https://github.com/digdir/designsystemet/commit/03e1dba876fdc3534507255bf726f6694c77f73d)) - -## [0.46.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.46.0...@digdir/design-system-react@0.46.1) (2024-01-16) - -### Bug Fixes - -- **NativeSelect:** Fix `readOnly` not disabling element ([#1391](https://github.com/digdir/designsystemet/issues/1391)) ([f6f693e](https://github.com/digdir/designsystemet/commit/f6f693e9a2a932f6295405d0e95e3ae2b8335150)) - -# [0.46.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.45.0...@digdir/design-system-react@0.46.0) (2024-01-15) - -### Features - -- **Combobox:** Virtualize options ([#1375](https://github.com/digdir/designsystemet/issues/1375)) ([608c066](https://github.com/digdir/designsystemet/commit/608c066c55402d6fa56068e78587f6ee642befb7)) -- **HelpText:** :sparkles: Add portal support ([#1367](https://github.com/digdir/designsystemet/issues/1367)) ([d8b201d](https://github.com/digdir/designsystemet/commit/d8b201d85400912012c5d1326700948b1b56d23b)) -- **Table:** ✨ Make the component ([#1364](https://github.com/digdir/designsystemet/issues/1364)) ([8c2ddad](https://github.com/digdir/designsystemet/commit/8c2ddadefdf8c64abff32aa32b332adfaf6fcff9)) -- **Table:** 🗑️ Change `Table` to legacy ([#1357](https://github.com/digdir/designsystemet/issues/1357)) ([e3da112](https://github.com/digdir/designsystemet/commit/e3da112d56a25f276f628808dee34bc7c9471ea6)) - -# [0.45.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.44.0...@digdir/design-system-react@0.45.0) (2024-01-10) - -### Bug Fixes - -- **Combobox:** Pressing `enter` on clear button does not work ([#1354](https://github.com/digdir/designsystemet/issues/1354)) ([884eca7](https://github.com/digdir/designsystemet/commit/884eca74fa41d3e21d2117fbb260fb3a0489d46b)) -- **Combobox:** Removing a chip with `enter` selects a value from the list ([#1352](https://github.com/digdir/designsystemet/issues/1352)) ([907a85d](https://github.com/digdir/designsystemet/commit/907a85dba91d23fe9a701637b0b921b70f3bfb3c)) - -### Features - -- **Combobox:** Disable looping when navigating list with keyboard ([#1344](https://github.com/digdir/designsystemet/issues/1344)) ([8bf82d0](https://github.com/digdir/designsystemet/commit/8bf82d05d3e60896fc3a9d1a7685dabf206d513c)) -- **Tag:** New Tag design ([#1335](https://github.com/digdir/designsystemet/issues/1335)) ([7640fad](https://github.com/digdir/designsystemet/commit/7640fad5b5c41318b0abd9e2938a89f6068e99ad)) - -# [0.44.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.43.0...@digdir/design-system-react@0.44.0) (2024-01-05) - -### Bug Fixes - -- **Chips:** :bug: Correct sizings ([#1316](https://github.com/digdir/designsystemet/issues/1316)) ([70044b8](https://github.com/digdir/designsystemet/commit/70044b89e448ae5ca57594b65b1f5757ffdd5b54)) -- **Search:** Scale input height based on sizing prop ([#1329](https://github.com/digdir/designsystemet/issues/1329)) ([bc32cec](https://github.com/digdir/designsystemet/commit/bc32ceca7aa77f5ad67f19c3262df18a6010b68b)) - -### Features - -- **Box:** Add support for changing element type with `asChild` ([#1295](https://github.com/digdir/designsystemet/issues/1295)) ([4d9b78d](https://github.com/digdir/designsystemet/commit/4d9b78dd8a48e978bccdcd0764cf9fbf52af6652)) -- **Fieldset:** Make legend prop required ([#1330](https://github.com/digdir/designsystemet/issues/1330)) ([0f502c0](https://github.com/digdir/designsystemet/commit/0f502c0cb6d84867cc22ac7655fe913c13babc33)) -- **Tooltip:** Add inverted version ([#1325](https://github.com/digdir/designsystemet/issues/1325)) ([accf27c](https://github.com/digdir/designsystemet/commit/accf27c6477aa07fdd939fc4a4d0d5655ad11849)) - -# [0.43.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.42.0...@digdir/design-system-react@0.43.0) (2024-01-02) - -### Bug Fixes - -- **Chip:** :bug: Use correct font token (short) ([#1290](https://github.com/digdir/designsystemet/issues/1290)) ([ddc1166](https://github.com/digdir/designsystemet/commit/ddc11669be368c35b9d12e17a8048fad902c8eb9)) -- Make sure `className` and `style` are applied to outer element ([#1277](https://github.com/digdir/designsystemet/issues/1277)) ([1a57299](https://github.com/digdir/designsystemet/commit/1a57299fac3e0431b22cc9f8b2a6ad649e3146d6)) - -### Features - -- **Box:** Add new border radius tokens ([#1275](https://github.com/digdir/designsystemet/issues/1275)) ([59e5cce](https://github.com/digdir/designsystemet/commit/59e5ccece893e580b7f32cfc6ae2761a3502a5c1)) -- **DropdownMenu:** Add portal support ([#1289](https://github.com/digdir/designsystemet/issues/1289)) ([a0ff1bf](https://github.com/digdir/designsystemet/commit/a0ff1bf994492c66e567d4887aae75b6fa4e984e)) -- **Popover:** Add portal support ([#1293](https://github.com/digdir/designsystemet/issues/1293)) ([e739c24](https://github.com/digdir/designsystemet/commit/e739c24f147819d7afe283b76b1cda4f54a1ad5f)) -- **Tooltip:** Add portal support ([#1294](https://github.com/digdir/designsystemet/issues/1294)) ([3e95c3a](https://github.com/digdir/designsystemet/commit/3e95c3a1efc2d2d0866f272b4491fff336b03890)) - -### Performance Improvements - -- :zap: Replace `classnames` with `clsx` ([#1272](https://github.com/digdir/designsystemet/issues/1272)) ([855f387](https://github.com/digdir/designsystemet/commit/855f38756dbc793e471a6718ca7265bb9fc5ff09)) - -# [0.42.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.41.1...@digdir/design-system-react@0.42.0) (2023-12-21) - -### Features - -- **Skeleton:** ✨ New component ([#1149](https://github.com/digdir/designsystemet/issues/1149)) ([ab459e6](https://github.com/digdir/designsystemet/commit/ab459e64ca12c64bcd058c445907d5e5b3beb557)) - -## [0.41.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.41.0...@digdir/design-system-react@0.41.1) (2023-12-20) - -### Bug Fixes - -- **Radio:** :bug: Correct sizes for icon ([#1255](https://github.com/digdir/designsystemet/issues/1255)) ([53d836e](https://github.com/digdir/designsystemet/commit/53d836e86d5321be3d48cd3ceccb3ccd4092100d)) -- **Switch:** :bug: Prevent from being clamped in flex container ([#1256](https://github.com/digdir/designsystemet/issues/1256)) ([f5d31eb](https://github.com/digdir/designsystemet/commit/f5d31eb4ff420fe5bc8a160c90f06eb43ce7d06f)) - -# [0.41.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.40.0...@digdir/design-system-react@0.41.0) (2023-12-19) - -### Bug Fixes - -- **Accordion:** 🐛 Fix wrong border colors for `first`, `second`, `third` colors ([#1246](https://github.com/digdir/designsystemet/issues/1246)) ([e38bf41](https://github.com/digdir/designsystemet/commit/e38bf415a2ca258bee229f69b4a16f4205a6f90f)) -- **DropdownMenu:** :bug: Add missing background ([#1252](https://github.com/digdir/designsystemet/issues/1252)) ([2abe4db](https://github.com/digdir/designsystemet/commit/2abe4dbd6065ce4784581c53058019b8fd0c621b)) - -### Features - -- **Combobox:** ✨ New component ([#1126](https://github.com/digdir/designsystemet/issues/1126)) ([2d51cd7](https://github.com/digdir/designsystemet/commit/2d51cd771e7c32c5e5fc92c037a33875331d2f7e)) -- **Select:** :wastebasket: Change `Select` to legacy ([#1250](https://github.com/digdir/designsystemet/issues/1250)) ([6f619d7](https://github.com/digdir/designsystemet/commit/6f619d76b60b5e7c28cc82295056d1fc6fcfe3d2)) - -# [0.40.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.39.0...@digdir/design-system-react@0.40.0) (2023-12-18) - -### Bug Fixes - -- **DropDownMenuItem:** add list style none ([#1190](https://github.com/digdir/designsystemet/issues/1190)) ([11bd19b](https://github.com/digdir/designsystemet/commit/11bd19bfb6ac76b2c697a22e876117c4128be3bd)) -- **List:** Wrap in `div` to allow access to `Heading` ([#1217](https://github.com/digdir/designsystemet/issues/1217)) ([afcadb7](https://github.com/digdir/designsystemet/commit/afcadb7c4cb4b368d247af0c41ed8debf53c4b66)) -- **Pagination:** Only use needed space for buttons ([#1220](https://github.com/digdir/designsystemet/issues/1220)) ([4bf3d74](https://github.com/digdir/designsystemet/commit/4bf3d745888f500259df5aadf4edee97ec4f95bc)) -- **Select:** Select not working properly in Modal ([#1195](https://github.com/digdir/designsystemet/issues/1195)) ([fb8be6a](https://github.com/digdir/designsystemet/commit/fb8be6a647ba0da8b5b23e65813508f34e09c8c1)) -- **ToggleGroup:** Only use needed space for buttons ([#1216](https://github.com/digdir/designsystemet/issues/1216)) ([3d4f721](https://github.com/digdir/designsystemet/commit/3d4f7212c2423eae043578dd5c28e35123d863e8)) - -### Features - -- **ToggleGroup:** Support `form` when `name` is provided ([#1218](https://github.com/digdir/designsystemet/issues/1218)) ([75fd99f](https://github.com/digdir/designsystemet/commit/75fd99f2d5f22ca9ceaceb022217a399b5e0a56e)) - -# [0.39.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.38.0...@digdir/design-system-react@0.39.0) (2023-12-14) - -### Bug Fixes - -- **Accordion:** support for using custom elements inside `Item` and `Header` ([#1198](https://github.com/digdir/designsystemet/issues/1198)) ([a09eea1](https://github.com/digdir/designsystemet/commit/a09eea1b8c08f91ebb67826aa375f149bb5ea35a)) -- **Button, Checkbox, NativeSelect, Radio, Search, Switch, Textfield:** 🐛 Sizes and alignment ([#1166](https://github.com/digdir/designsystemet/issues/1166)) ([716395d](https://github.com/digdir/designsystemet/commit/716395dc5f0805f92c485572ae98693d71d5fa6d)) -- **Chip:** :bug: Add missing disabled styling and behaviour ([#1201](https://github.com/digdir/designsystemet/issues/1201)) ([d6647bf](https://github.com/digdir/designsystemet/commit/d6647bfd8622c10fe23fa76dfbadfbb0a5367e89)) -- **ErrorMessage:** Change default wrapper to `div` ([#1203](https://github.com/digdir/designsystemet/issues/1203)) ([f14e22b](https://github.com/digdir/designsystemet/commit/f14e22b6bbd14a9e1dbd923583e8573109f9cdaa)) -- **NativeSelect:** Fix firefox background color ([#1185](https://github.com/digdir/designsystemet/issues/1185)) ([ddf8d89](https://github.com/digdir/designsystemet/commit/ddf8d8976513c87e155d534950955effc8398574)) -- **Search:** :bug: Fix missaligned search icon ([#1207](https://github.com/digdir/designsystemet/issues/1207)) ([eac15b2](https://github.com/digdir/designsystemet/commit/eac15b283fea8a2c8994b1b8f26b59101a89bb90)) -- **Textfield, Textarea:** :bug: Only apply `aria-describedby` if its defined ([#1184](https://github.com/digdir/designsystemet/issues/1184)) ([f510c0c](https://github.com/digdir/designsystemet/commit/f510c0cc98b33838da452bd7a89869948247c449)) -- **ToggleGroup:** :bug: Use correct paddings on `ToggleGroup.Item` ([#1209](https://github.com/digdir/designsystemet/issues/1209)) ([2b6dade](https://github.com/digdir/designsystemet/commit/2b6dade30d65fb5565c3c266130beaf3480a3520)) - -### Features - -- **Heading:** Make `size` optional with default `xlarge` ([#1208](https://github.com/digdir/designsystemet/issues/1208)) ([b2aaf27](https://github.com/digdir/designsystemet/commit/b2aaf275067bbf2148c7825e8a48f1d8721e7c41)) - -# [0.38.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.37.0...@digdir/design-system-react@0.38.0) (2023-12-01) - -### Bug Fixes - -- :bug: Temporary change order for injected CSS ([#1137](https://github.com/digdir/designsystemet/issues/1137)) ([8f8d978](https://github.com/digdir/designsystemet/commit/8f8d97861d96f46f4b1404f24b642993a87a0169)) -- **Checkbox, Radio, Search:** 🐛 Styling interferences ([#1163](https://github.com/digdir/designsystemet/issues/1163)) ([b53f050](https://github.com/digdir/designsystemet/commit/b53f050ada1446f955082ea95739cb7fe00f006f)) -- **Chip.Toggle:** Make Chip.Toggle fallback on context size ([#1150](https://github.com/digdir/designsystemet/issues/1150)) ([c555bca](https://github.com/digdir/designsystemet/commit/c555bca248b5c07e87b39c8084802da120c7b334)) -- **DropdownMenu:** :bug: Add missing z-index ([#1142](https://github.com/digdir/designsystemet/issues/1142)) ([ae84c10](https://github.com/digdir/designsystemet/commit/ae84c10901f1efb9315394d57496982490cff9bb)) -- **Link:** Underline not thicker on hover in safari ([#1151](https://github.com/digdir/designsystemet/issues/1151)) ([22580b3](https://github.com/digdir/designsystemet/commit/22580b3268e485079679b3875072cb14fc4d9b6e)) -- **Modal:** Change solution for setting width and fixed clicking on top or bottom closing the Modal ([#1171](https://github.com/digdir/designsystemet/issues/1171)) ([22fbc6b](https://github.com/digdir/designsystemet/commit/22fbc6bad67ef3c6b6a4c1bbef742323a7f65c1d)) -- **Popover:** wrong border size on arrow ([#1176](https://github.com/digdir/designsystemet/issues/1176)) ([499c5e2](https://github.com/digdir/designsystemet/commit/499c5e2a7a8816ee67ec95f592467df7bbf96fb1)) - -### Features - -- **Card:** ✨ New component ([#1009](https://github.com/digdir/designsystemet/issues/1009)) ([c158e01](https://github.com/digdir/designsystemet/commit/c158e017b365109a9da34a9ddf49755d53b2b588)) -- **Divider:** :lipstick: Adjusted size ([#1165](https://github.com/digdir/designsystemet/issues/1165)) ([71dc2f8](https://github.com/digdir/designsystemet/commit/71dc2f8762d0ce25a9f0541a0c9cb4dac457162b)) -- **sizing:** Syncronize sizing between Figma and React components ([#1084](https://github.com/digdir/designsystemet/issues/1084)) ([06c9c44](https://github.com/digdir/designsystemet/commit/06c9c44bc03e32a8911a910c4e424aea963002d2)) -- **SkipLink:** ✨ New component ([#1111](https://github.com/digdir/designsystemet/issues/1111)) ([996f436](https://github.com/digdir/designsystemet/commit/996f436e757b0a9f24dc15699539a0781a76c088)) - -# [0.37.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.35.0...@digdir/design-system-react@0.37.0) (2023-11-17) - -### Bug Fixes - -- **Button:** :bug: Adjust sizing to match `Textfield` and other fixes according to Figma ([#1023](https://github.com/digdir/designsystemet/issues/1023)) ([a3252f9](https://github.com/digdir/designsystemet/commit/a3252f99c135936b50454957914914e8d965cb5d)) -- **Divider:** :label: Optional `color` prop ([#1085](https://github.com/digdir/designsystemet/issues/1085)) ([7ae9eca](https://github.com/digdir/designsystemet/commit/7ae9eca79fe6f522d1ee3af1cf0ae3c424b5ede6)) -- **Divider:** Add so it can recieve `HTMLHRElement` props ([#1064](https://github.com/digdir/designsystemet/issues/1064)) ([c7c3acd](https://github.com/digdir/designsystemet/commit/c7c3acdb2e2d8520e1fedd9961a4c2789ed847d8)) -- **List:** :label: Default type for `children` ([#1032](https://github.com/digdir/designsystemet/issues/1032)) ([4f83fa0](https://github.com/digdir/designsystemet/commit/4f83fa0a3b4a27fbbd9821b6b95ee2c311cdd647)) -- **OverridableComponent:** Add `displayName` to type ([#1106](https://github.com/digdir/designsystemet/issues/1106)) ([416810c](https://github.com/digdir/designsystemet/commit/416810cd974974e6ece20ebc703ec8850a1679ff)) -- **Switch:** :bug: Should reduce-motion ([#1049](https://github.com/digdir/designsystemet/issues/1049)) ([58926be](https://github.com/digdir/designsystemet/commit/58926be00777eb70d2ccf98332ed0d47d09e0d4f)) - -### Features - -- :sparkles: New `Search` component ([#858](https://github.com/digdir/designsystemet/issues/858)) ([b4888c4](https://github.com/digdir/designsystemet/commit/b4888c43398447a58d17d36920888c4d77ccccbf)) -- **Box:** add `forwardRef`, make props default `undefined` ([#1059](https://github.com/digdir/designsystemet/issues/1059)) ([7e0cd1c](https://github.com/digdir/designsystemet/commit/7e0cd1c80c0169b8066d1ab1a40b5317efbf4299)) -- **Box:** Make the component ([#1001](https://github.com/digdir/designsystemet/issues/1001)) ([1651d4d](https://github.com/digdir/designsystemet/commit/1651d4d2b03f50d27a9b252556b18ebb30dea217)) -- **Combobox:** Create the component ([#774](https://github.com/digdir/designsystemet/issues/774)) ([23d4027](https://github.com/digdir/designsystemet/commit/23d4027ae422531cc279e2b00b25ab679ba524dd)) -- **Divider:** ✨ New component ([#1057](https://github.com/digdir/designsystemet/issues/1057)) ([9d5d257](https://github.com/digdir/designsystemet/commit/9d5d257860dc7f2a0886bf8e610799eefe8a62a5)) -- **DropdownMenu:** ✨ New component ([#1070](https://github.com/digdir/designsystemet/issues/1070)) ([23bfddf](https://github.com/digdir/designsystemet/commit/23bfddf724c9ead13d284e9ac0d02ddf5ccfd71d)) -- **Modal:** ✨ New component ([#1037](https://github.com/digdir/designsystemet/issues/1037)) ([8b720cf](https://github.com/digdir/designsystemet/commit/8b720cf32c77ca1f5b8a080b067bac2789afcfef)) -- Remove density tokens ([#1079](https://github.com/digdir/designsystemet/issues/1079)) ([d25c4fd](https://github.com/digdir/designsystemet/commit/d25c4fdf77080776cfd71c69a88da4013edc4caf)) -- **ResponsiveTable:** 🗑️ Change to Legacy ([#1108](https://github.com/digdir/designsystemet/issues/1108)) ([348d03b](https://github.com/digdir/designsystemet/commit/348d03b8be6996ac1d4a2093aecdbfa66cb1bf86)) -- **Select:** should be able to add name to the select component ([#1046](https://github.com/digdir/designsystemet/issues/1046)) ([4d9fbb2](https://github.com/digdir/designsystemet/commit/4d9fbb28925b9aa052bb8d0026e2c46527c00e0f)) - -# [0.36.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.35.0...@digdir/design-system-react@0.36.0) (2023-11-08) - -### Bug Fixes - -- **Button:** :bug: Adjust sizing to match `Textfield` and other fixes according to Figma ([#1023](https://github.com/digdir/designsystemet/issues/1023)) ([a3252f9](https://github.com/digdir/designsystemet/commit/a3252f99c135936b50454957914914e8d965cb5d)) -- **Divider:** Add so it can recieve `HTMLHRElement` props ([#1064](https://github.com/digdir/designsystemet/issues/1064)) ([c7c3acd](https://github.com/digdir/designsystemet/commit/c7c3acdb2e2d8520e1fedd9961a4c2789ed847d8)) -- **List:** :label: Default type for `children` ([#1032](https://github.com/digdir/designsystemet/issues/1032)) ([4f83fa0](https://github.com/digdir/designsystemet/commit/4f83fa0a3b4a27fbbd9821b6b95ee2c311cdd647)) -- **Switch:** :bug: Should reduce-motion ([#1049](https://github.com/digdir/designsystemet/issues/1049)) ([58926be](https://github.com/digdir/designsystemet/commit/58926be00777eb70d2ccf98332ed0d47d09e0d4f)) - -### Features - -- **Box:** Add `forwardRef`, make props default `undefined` ([#1059](https://github.com/digdir/designsystemet/issues/1059)) ([7e0cd1c](https://github.com/digdir/designsystemet/commit/7e0cd1c80c0169b8066d1ab1a40b5317efbf4299)) -- **Box:** New internal component ([#1001](https://github.com/digdir/designsystemet/issues/1001)) ([1651d4d](https://github.com/digdir/designsystemet/commit/1651d4d2b03f50d27a9b252556b18ebb30dea217)) -- **Combobox:** New experimental component ([#774](https://github.com/digdir/designsystemet/issues/774)) ([23d4027](https://github.com/digdir/designsystemet/commit/23d4027ae422531cc279e2b00b25ab679ba524dd)) -- **Divider:** ✨ New component ([#1057](https://github.com/digdir/designsystemet/issues/1057)) ([9d5d257](https://github.com/digdir/designsystemet/commit/9d5d257860dc7f2a0886bf8e610799eefe8a62a5)) -- **Select:** Should be able to add name to the select component ([#1046](https://github.com/digdir/designsystemet/issues/1046)) ([4d9fbb2](https://github.com/digdir/designsystemet/commit/4d9fbb28925b9aa052bb8d0026e2c46527c00e0f)) - -# [0.35.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.34.0...@digdir/design-system-react@0.35.0) (2023-10-30) - -### Bug Fixes - -- **HelpText:** Add missing `aria-expanded` ([#992](https://github.com/digdir/designsystemet/issues/992)) ([383ed03](https://github.com/digdir/designsystemet/commit/383ed0366e1fd831c1b354411df78a5670b657d2)) -- **LegacyTextField, LegacyTextArea:** :bug: Fix wrong placement of character counter ([#1008](https://github.com/digdir/designsystemet/issues/1008)) ([c75aa3f](https://github.com/digdir/designsystemet/commit/c75aa3fd4e7322d4b6870423dfbc1264b3e7ba11)) - -### Features - -- **Spinner:** Update component and docs ([#970](https://github.com/digdir/designsystemet/issues/970)) ([269f157](https://github.com/digdir/designsystemet/commit/269f1578b7571ab6eb53c52cb8055734abaa14f9)) - -# [0.34.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.33.0...@digdir/design-system-react@0.34.0) (2023-10-25) - -### Bug Fixes - -- **InputWrapper:** Remove gap ([#989](https://github.com/digdir/designsystemet/issues/989)) ([1fac2f7](https://github.com/digdir/designsystemet/commit/1fac2f784ca5814a66529c51d800307e70def9d1)) -- **List:** Add more spacing between items ([#982](https://github.com/digdir/designsystemet/issues/982)) ([6febc88](https://github.com/digdir/designsystemet/commit/6febc887f165802efd5a8ded9d63ec547b2032cf)) -- **Switch:** Remove `gap` when there is no children ([#986](https://github.com/digdir/designsystemet/issues/986)) ([1c95186](https://github.com/digdir/designsystemet/commit/1c951865d51b042bf4f00998e3d71d2ec9e6ded2)) - -### Features - -- Add `htmlSize` to `NativeSelect` and `Textfield` ([#972](https://github.com/digdir/designsystemet/issues/972)) ([bf72f3b](https://github.com/digdir/designsystemet/commit/bf72f3b7cf5b97ed7af53c731c757c6acbc90048)) -- **List:** More options for `List` component ([#913](https://github.com/digdir/designsystemet/issues/913)) ([8903110](https://github.com/digdir/designsystemet/commit/8903110823ce7d5ce85651724d057efc3d09ffd4)) - -# [0.33.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.32.1...@digdir/design-system-react@0.33.0) (2023-10-19) - -### Features - -- **HelpText:** Use new Popover ([#960](https://github.com/digdir/designsystemet/issues/960)) ([b12da58](https://github.com/digdir/designsystemet/commit/b12da582879ceb9847d0b63944fe4d3ab643b146)) -- **NativeSelect:** Updated to match other form components ([#955](https://github.com/digdir/designsystemet/issues/955)) ([71f048e](https://github.com/digdir/designsystemet/commit/71f048ee01e4c0d638bb2204dd40b289fd422d75)) -- **Popover:** :wastebasket: Change to Legacy ([#956](https://github.com/digdir/designsystemet/issues/956)) ([cf9be72](https://github.com/digdir/designsystemet/commit/cf9be72215ff813b80d881852c52ccb083b5ca5a)) -- **Popover:** New component and method for attaching to anchor element ([#959](https://github.com/digdir/designsystemet/issues/959)) ([98f9985](https://github.com/digdir/designsystemet/commit/98f99853bfd55c9dde0d307188be2b00528800bc)) -- **Tag:** Change `filled` and `outline` to `primary` and `secondary` ([#958](https://github.com/digdir/designsystemet/issues/958)) ([9c230af](https://github.com/digdir/designsystemet/commit/9c230af1fae54db02420241f30261971d3aaa83c)) - -## [0.32.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.32.0...@digdir/design-system-react@0.32.1) (2023-10-17) - -### Bug Fixes - -- **ToggleGroup:** :bug: Fix missing styling on `ToggleGroup.Item` ([#952](https://github.com/digdir/designsystemet/issues/952)) ([9ebf8c1](https://github.com/digdir/designsystemet/commit/9ebf8c1b676c55aae0f951a30a684c5c325966b1)) - -# [0.32.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.31.0...@digdir/design-system-react@0.32.0) (2023-10-16) - -### Bug Fixes - -- **Chip:** Move all `Chip` css to one file ([#944](https://github.com/digdir/designsystemet/issues/944)) ([ee4f4d3](https://github.com/digdir/designsystemet/commit/ee4f4d3243d3be08d6c9cdfc28729ee2240e546a)) - -### Features - -- **Button:** :boom: Removed `dashedBorder` ([#941](https://github.com/digdir/designsystemet/issues/941)) ([2297429](https://github.com/digdir/designsystemet/commit/2297429a2cbc00a2287954210aeccb02ca3fc56d)) -- **Button:** New `variants` and minor fixes ([#938](https://github.com/digdir/designsystemet/issues/938)) ([bc7a052](https://github.com/digdir/designsystemet/commit/bc7a052e75499afd0e2260ee7e2557191b8b12bd)) - -## [0.31.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.31.0...@digdir/design-system-react@0.31.1) (2023-10-13) - -### Bug Fixes - -- Revert "fix(Select): Hide list when reference is hidden (#917)" ([#936](https://github.com/digdir/designsystemet/issues/936)) - -# [0.31.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.30.0...@digdir/design-system-react@0.31.0) (2023-10-12) - -### Bug Fixes - -- Add missing export `ToggleGroup` ([#931](https://github.com/digdir/designsystemet/issues/931)) ([782d77d](https://github.com/digdir/designsystemet/commit/782d77d7cbbdba83744649134c1e30ec8a682b0d)) - -### Features - -- **Button:** :sparkles: Support for overriding html element using `as` ([#926](https://github.com/digdir/designsystemet/issues/926)) ([5689052](https://github.com/digdir/designsystemet/commit/5689052b461c424bf26bc750c2e1212f3034c430)) - -# [0.30.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.29.0...@digdir/design-system-react@0.30.0) (2023-10-11) - -### Bug Fixes - -- **Select:** Hide list when reference is hidden ([#917](https://github.com/digdir/designsystemet/issues/917)) ([bccea75](https://github.com/digdir/designsystemet/commit/bccea7520cb7f7de13b434dbd4dcef646885aa36)) - -### Features - -- **Tooltip:** Create new tooltip component ([#914](https://github.com/digdir/designsystemet/issues/914)) ([eccc36d](https://github.com/digdir/designsystemet/commit/eccc36d24b4e8cdf77939d88e45a2a9eb9e76998)) - -# [0.29.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.28.1...@digdir/design-system-react@0.29.0) (2023-10-07) - -### Features - -- **Tabs:** :sparkles: Add missing export for new Tabs ([#915](https://github.com/digdir/designsystemet/issues/915)) ([6cf70ec](https://github.com/digdir/designsystemet/commit/6cf70ec65d8ae713b71f7345cb73b70b62a1997c)) - -## [0.28.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.28.0...@digdir/design-system-react@0.28.1) (2023-10-06) - -### Bug Fixes - -- **Accordion:** Make border styling overridable ([#900](https://github.com/digdir/designsystemet/issues/900)) ([b4af852](https://github.com/digdir/designsystemet/commit/b4af8521ecf66bb0dbd38bc431cec4db98e6ebc7)) -- **Radio:** Adhere to provided name prop ([#903](https://github.com/digdir/designsystemet/issues/903)) ([f0cfa2a](https://github.com/digdir/designsystemet/commit/f0cfa2a1139b5e2291123763cba5a8ac69f390f5)) - -# [0.28.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.27.0...@digdir/design-system-react@0.28.0) (2023-10-05) - -### Features - -- Add basic SSR support and peerDependecies to `react 18.2.0` ([#864](https://github.com/digdir/designsystemet/issues/864)) ([d512ee2](https://github.com/digdir/designsystemet/commit/d512ee26e6f50e61588538961dd185b92e3e6654)) -- Change `color` names `primary`, `secondary`, `tertiary` to `first`, `second`, `third` ([#887](https://github.com/digdir/designsystemet/issues/887)) ([50f4eee](https://github.com/digdir/designsystemet/commit/50f4eee4bf2ce813001ad1e28fa12648149fe677)) -- **DosAndDonts:** Add Do and Dont component ([#857](https://github.com/digdir/designsystemet/issues/857)) ([8116d00](https://github.com/digdir/designsystemet/commit/8116d00eb8afbb606bd325a7a1695c31bbc3fcbe)) -- **Tabs:** :sparkles: New `Tabs` Component ([#876](https://github.com/digdir/designsystemet/issues/876)) ([6ae19e7](https://github.com/digdir/designsystemet/commit/6ae19e75e7f874dc7d1acbfe9587c8ffbb29e641)) -- **Tabs:** :wastebasket: Change to Legacy ([#875](https://github.com/digdir/designsystemet/issues/875)) ([1863383](https://github.com/digdir/designsystemet/commit/186338375861af241c565be4bf86ab9c05d1867b)) -- **ToggleGroup:** Add accessible title for items with only icon ([#897](https://github.com/digdir/designsystemet/issues/897)) ([9482315](https://github.com/digdir/designsystemet/commit/94823150b5585ba9612fbbfbb70c32818812fcaa)) - -# [0.27.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.26.0...@digdir/design-system-react@0.27.0) (2023-09-28) - -### Features - -- **Button, Chip, Accordion:** :recycle: Change components to use the same class for focus behaviour ([#868](https://github.com/digdir/designsystemet/issues/868)) ([b3fa591](https://github.com/digdir/designsystemet/commit/b3fa591d86bbf2b497a618464e3f3af10b852ad6)) -- **ToggleButtonGroup:** :wastebasket: Change to Legacy ([#870](https://github.com/digdir/designsystemet/issues/870)) ([3298aba](https://github.com/digdir/designsystemet/commit/3298aba96e343af73bcf8b12cfcb64f9cf0a61a0)) -- **ToggleGroup:** ✨ New `ToggleGroup` component ([#813](https://github.com/digdir/designsystemet/issues/813)) ([bc45c2e](https://github.com/digdir/designsystemet/commit/bc45c2e50a941fdd49028607fa3d94c4876e4cc0)) - -# [0.26.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.25.1...@digdir/design-system-react@0.26.0) (2023-09-22) - -### Bug Fixes - -- **Textfield:** :lipstick: Style adjustments after feedback ([#852](https://github.com/digdir/designsystemet/issues/852)) ([4544f1e](https://github.com/digdir/designsystemet/commit/4544f1e96fb90c00360377b2a18998e9bce36f16)) - -### Features - -- **Textarea:** :sparkles: New `Textarea` component ([#851](https://github.com/digdir/designsystemet/issues/851)) ([9d9c3ab](https://github.com/digdir/designsystemet/commit/9d9c3ab390cea40bd3137845fd2b7fb251c84b7a)) -- **TextArea:** :wastebasket: Change to Legacy ([#853](https://github.com/digdir/designsystemet/issues/853)) ([9da973f](https://github.com/digdir/designsystemet/commit/9da973f9db34576ad89f5d31f07ccfc933f84ee7)) - -## [0.25.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.25.0...@digdir/design-system-react@0.25.1) (2023-09-22) - -### Bug Fixes - -- **Textfield:** Prop typo ([#848](https://github.com/digdir/designsystemet/issues/848)) ([0c59b86](https://github.com/digdir/designsystemet/commit/0c59b86f661222e0021311cd5eba6c7aa429ea8c)) - -# [0.25.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.24.2...@digdir/design-system-react@0.25.0) (2023-09-21) - -### Features - -- **ErrorMessage:** :sparkles: Add new option to toggle error color ([#836](https://github.com/digdir/designsystemet/issues/836)) ([8b177f3](https://github.com/digdir/designsystemet/commit/8b177f3f25b3c2075d38f8f5e8a438d8727b5c98)) -- **ErrorMessage:** ✨ Add `large` size ([#840](https://github.com/digdir/designsystemet/issues/840)) ([9742abf](https://github.com/digdir/designsystemet/commit/9742abf1d002967fdfdb6b3caa8f33bb11a85019)) -- **Fieldset, Switch, Radio, Checkbox:** :sparkles: Add `large` size ([#841](https://github.com/digdir/designsystemet/issues/841)) ([4e8052f](https://github.com/digdir/designsystemet/commit/4e8052fc6a886b68676ca5de0a47d80eadb93656)) -- **Textfield:** :sparkles: New `Textfield` component ([#816](https://github.com/digdir/designsystemet/issues/816)) ([0c14cfa](https://github.com/digdir/designsystemet/commit/0c14cfa3c6add379ada2f5e11dd2b6a0de05aa56)) -- **TextField:** 🗑️ Change to Legacy ([#838](https://github.com/digdir/designsystemet/issues/838)) ([c3d6d2d](https://github.com/digdir/designsystemet/commit/c3d6d2d684ff764fe96a92e1852ddf115cf1ec62)) - -## [0.24.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.24.1...@digdir/design-system-react@0.24.2) (2023-09-19) - -### Bug Fixes - -- **Switch:** :bug: Adher to passed `checked` & `defaultChecked` props ([#832](https://github.com/digdir/designsystemet/issues/832)) ([13a4577](https://github.com/digdir/designsystemet/commit/13a45774943d01c6ea3cb9e7056b1686dfa9a358)) - -## [0.24.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.24.0...@digdir/design-system-react@0.24.1) (2023-09-18) - -### Bug Fixes - -- **Accordion:** hide content in Accordions from screen readers when Accordion is closed ([#815](https://github.com/digdir/designsystemet/issues/815)) ([eea59af](https://github.com/digdir/designsystemet/commit/eea59af9d09c59ba8da734a0b5cf60bd704661d1)) -- **Radio, Checkbox, Button, Chip.Toggle:** Remove sticky hover on touch devices ([#803](https://github.com/digdir/designsystemet/issues/803)) ([a4be791](https://github.com/digdir/designsystemet/commit/a4be7918b49a607ebfa7042b3aa2d8e2f798a016)) -- **Radio, Checkbox, Switch:** :bug: Remove z-index on selection control icon ([#798](https://github.com/digdir/designsystemet/issues/798)) ([6c1db8b](https://github.com/digdir/designsystemet/commit/6c1db8bf213e62eb9b788ac82e3114e90cd9f052)) - -# [0.24.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.23.3...@digdir/design-system-react@0.24.0) (2023-08-31) - -### Features - -- **Switch:** :sparkles: New `Switch` component ([#727](https://github.com/digdir/designsystemet/issues/727)) ([8fa362b](https://github.com/digdir/designsystemet/commit/8fa362bde7ac7d7c6d242e625bf2e4f42f90aa8d)) - -## [0.23.3](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.23.2...@digdir/design-system-react@0.23.3) (2023-08-25) - -### Bug Fixes - -- **Chip:** Proper styling on tall chips ([#756](https://github.com/digdir/designsystemet/issues/756)) ([b47eb37](https://github.com/digdir/designsystemet/commit/b47eb37a40019eb4cfeb755551a688541ab60dd7)) - -## [0.23.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.23.1...@digdir/design-system-react@0.23.2) (2023-08-23) - -### Bug Fixes - -- **Accordion:** :bug: Correct header color opacity ([f68ad25](https://github.com/digdir/designsystemet/commit/f68ad25d4693505bfa78679d1cb14454bbf99644)) - -## [0.23.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.23.0...@digdir/design-system-react@0.23.1) (2023-08-23) - -### Bug Fixes - -- **Accordion:** Apply height animation on opening and closing only ([#730](https://github.com/digdir/designsystemet/issues/730)) ([78852e1](https://github.com/digdir/designsystemet/commit/78852e195efea10b9eb93085b5ad20b843f39aa5)) -- **Checkbox, Radio, Fieldset:** :bug: Make sure spacings are only applied when needed ([#746](https://github.com/digdir/designsystemet/issues/746)) ([f03df61](https://github.com/digdir/designsystemet/commit/f03df61dd5b5ca3e93e62a30bd480c9541a71ccf)) -- **InputWrapper:** isValid works now independent of charLimit validation ([#734](https://github.com/digdir/designsystemet/issues/734)) ([bf4ecd8](https://github.com/digdir/designsystemet/commit/bf4ecd83f71f66351d6de0cae4343fcded53ed0a)) -- **Link:** :lipstick: Tweaked style for better visibility between states ([#744](https://github.com/digdir/designsystemet/issues/744)) ([cfc37e2](https://github.com/digdir/designsystemet/commit/cfc37e2687db883a25dc16042c1e3c602455850b)) -- **Pagination:** :bug: Fix compact spacings and ellipsis alignment ([#748](https://github.com/digdir/designsystemet/issues/748)) ([c54eb1e](https://github.com/digdir/designsystemet/commit/c54eb1ec90b6088774202effa630d3c1d4a0425f)) -- **Radio, Checkbox:** :bug: Fallback to `checked` or `defaultChecked` if `Group` `value` is not set ([#733](https://github.com/digdir/designsystemet/issues/733)) ([4777dac](https://github.com/digdir/designsystemet/commit/4777dac6bef610cbf5010ff37eff5d6c42820df9)) - -# [0.23.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.22.0...@digdir/design-system-react@0.23.0) (2023-08-16) - -### Bug Fixes - -- **Pagination:** :wheelchair: Fix 'a11y' error for Pagination next/prev buttons ([#726](https://github.com/digdir/designsystemet/issues/726)) ([e0e6fa4](https://github.com/digdir/designsystemet/commit/e0e6fa424c9d1af54546eb344e58105271c8ea63)) - -### Features - -- **Checkbox, CheckboxGroup, FieldSet, RadioButton, RadioGroup:** :wastebasket: Change to Legacy ([#716](https://github.com/digdir/designsystemet/issues/716)) ([b22d836](https://github.com/digdir/designsystemet/commit/b22d836c51ffcb024331eb07109547b288151888)) -- **Checkbox, Radio, Fieldset:** :sparkles: Release new components ([#720](https://github.com/digdir/designsystemet/issues/720)) ([7facb4d](https://github.com/digdir/designsystemet/commit/7facb4d1c77deffedb350fc7ed3e4bceecd4ff75)) -- **Link:** Create the component ([#711](https://github.com/digdir/designsystemet/issues/711)) ([ac0adcc](https://github.com/digdir/designsystemet/commit/ac0adcc2992499fd850e7974a54a7e4b19dfdd06)) - -### BREAKING CHANGE - -- **enums:** 🔥 Remove `enums` ([#721](https://github.com/digdir/designsystemet/issues/721)) -- **LegacyAccordion:** 🔥 Remove `LegacyAccordion` ([#707](https://github.com/digdir/designsystemet/issues/707)) - -# [0.22.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.21.0...@digdir/design-system-react@0.22.0) (2023-08-09) - -### Bug Fixes - -- **Accordion:** Support dynamic height ([#689](https://github.com/digdir/designsystemet/issues/689)) ([6624ba1](https://github.com/digdir/designsystemet/commit/6624ba1eb75007cf07227f74a633f78d0b718ce3)) -- **Alert:** :bug: Left border should now be positioned correctly inside the box ([#702](https://github.com/digdir/designsystemet/issues/702)) ([5fa2aeb](https://github.com/digdir/designsystemet/commit/5fa2aeb4a17e77f5fbb98fd8ac039bb4bed0a473)) -- **Chip.Removable:** :bug: Use correct button type to avoid default submit ([#694](https://github.com/digdir/designsystemet/issues/694)) ([357cfe8](https://github.com/digdir/designsystemet/commit/357cfe827460031cc5e03f0e98f61947210bf40c)) - -### Features - -- **Button:** :recycle: Change default `size` to medium (instead of small`) ([#698](https://github.com/digdir/designsystemet/issues/698)) ([ab238df](https://github.com/digdir/designsystemet/commit/ab238df8edb86f0432fe59b0d653986c6d3f09b5)) -- **Checkbox:** ✨ New `Checkbox` component (unreleased) ([#681](https://github.com/digdir/designsystemet/issues/681)) ([6b49301](https://github.com/digdir/designsystemet/commit/6b4930169802a860bad518173e18186407a36f02)) -- **Chip.Toggle:** ♻️ Enabled `checkmark` as default when `selected` ([#693](https://github.com/digdir/designsystemet/issues/693)) ([049460c](https://github.com/digdir/designsystemet/commit/049460c1b027f1846e5bf675b4e6768d6320458a)) -- **Label:** :sparkles: Added new prop `weight` for setting font weight ([#699](https://github.com/digdir/designsystemet/issues/699)) ([1641752](https://github.com/digdir/designsystemet/commit/16417526f584339544129ba990891f3dabf66267)) - -# [0.21.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.20.0...@digdir/design-system-react@0.21.0) (2023-08-02) - -### Bug Fixes - -- **Button:** :bug: Fix icon being clipped in Firefox browser ([#679](https://github.com/digdir/designsystemet/issues/679)) ([75b8bd7](https://github.com/digdir/designsystemet/commit/75b8bd79df45345be7ea4f07a4c88c303ec5c946)) - -### Features - -- **Pagination:** New `Pagination` component ([#677](https://github.com/digdir/designsystemet/issues/677)) ([6085019](https://github.com/digdir/designsystemet/commit/6085019e7756d2a06cd087914d7ab839ca184765)) -- **Radio, Fieldset:** :sparkles: New `Radio` & `Fieldset` component (unreleased) ([#666](https://github.com/digdir/designsystemet/issues/666)) ([e2d6f89](https://github.com/digdir/designsystemet/commit/e2d6f89523576520058024e3a02fad367148ac7e)) - -# [0.20.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.19.0...@digdir/design-system-react@0.20.0) (2023-07-24) - -### Bug Fixes - -- **Button:** :wheelchair: Added 44px clickbound for `small` size ([#676](https://github.com/digdir/designsystemet/issues/676)) ([921b9c7](https://github.com/digdir/designsystemet/commit/921b9c73315232e83fb25cd7365133e5e0dff3f1)) -- **Button:** Correct sizes when only icon is used ([#674](https://github.com/digdir/designsystemet/issues/674)) ([0598060](https://github.com/digdir/designsystemet/commit/05980600bdb122ebf0965540ea1d0fbf65e26c7f)) - -### Features - -- **Chip:** implemented Chip.Toggle ([#669](https://github.com/digdir/designsystemet/issues/669)) ([bc50da4](https://github.com/digdir/designsystemet/commit/bc50da48bd834b80f256a835c3bb7fd7c5b17afc)) - -# [0.19.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.18.0...@digdir/design-system-react@0.19.0) (2023-07-05) - -### Features - -- **Accordion:** use the new semantic colors for focus style ([#611](https://github.com/digdir/designsystemet/issues/611)) ([20bffae](https://github.com/digdir/designsystemet/commit/20bffaea35ef913fd7a4e580f30e649647310a7a)) -- **ToggleButton:** use the correct focus styling ([#612](https://github.com/digdir/designsystemet/issues/612)) ([507f566](https://github.com/digdir/designsystemet/commit/507f566777119506b3747acd493e33266aa3657d)) - -# [0.18.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.17.0...@digdir/design-system-react@0.18.0) (2023-06-28) - -### Bug Fixes - -- **Chip:** visual improvements ([#610](https://github.com/digdir/designsystemet/issues/610)) ([58a4627](https://github.com/digdir/designsystemet/commit/58a46278a00faf10f0e86cdbf7813b57dceb40cc)) - -### Features - -- **Chip.Group, Chip.Removable, Chip:** created chips ([#575](https://github.com/digdir/designsystemet/issues/575)) ([26eae91](https://github.com/digdir/designsystemet/commit/26eae91cabbbbf5528b1a339ce99458dcc75c08a)) -- **TextField:** Type attribute ([#579](https://github.com/digdir/designsystemet/issues/579)) ([0ec6e5d](https://github.com/digdir/designsystemet/commit/0ec6e5db7f59f192eba9173a428a69b9ff75c754)) - -# [0.17.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.16.0...@digdir/design-system-react@0.17.0) (2023-06-21) - -### Bug Fixes - -- **Alert:** avoid the border-left to disappear when elevated is true ([#554](https://github.com/digdir/designsystemet/issues/554)) ([cf26ba2](https://github.com/digdir/designsystemet/commit/cf26ba22686e15dc424be93bbe2fb0aa302f6e97)) -- **Select:** ResizeObserver loop error ([#565](https://github.com/digdir/designsystemet/issues/565)) ([48051db](https://github.com/digdir/designsystemet/commit/48051db43bf886e9bea1584e8245c14ba83bfa3f)) -- **Typography:** fixed spacing ([#569](https://github.com/digdir/designsystemet/issues/569)) ([6a0311e](https://github.com/digdir/designsystemet/commit/6a0311e3fe0d41bbc6ae996136016c320d4e9447)) - -### Features - -- **ErrorMessage:** added xsmall options ([#552](https://github.com/digdir/designsystemet/issues/552)) ([e776dfb](https://github.com/digdir/designsystemet/commit/e776dfb8d17216ebf9ce870f11d7071bc48f41e8)) -- **RadioButton:** implemented forwardRef ([#562](https://github.com/digdir/designsystemet/issues/562)) ([66302de](https://github.com/digdir/designsystemet/commit/66302dea55cd082357b633f15744381cc0bc9318)) - -# [0.16.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.15.0...@digdir/design-system-react@0.16.0) (2023-06-14) - -### Features - -- **Tag:** created the tag component ([#542](https://github.com/digdir/designsystemet/issues/542)) ([7fd2330](https://github.com/digdir/designsystemet/commit/7fd23304220bcf69291b51b5f33b93556484a142)) - -# [0.15.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.14.0...@digdir/design-system-react@0.15.0) (2023-06-09) - -### Bug Fixes - -- **Checkbox:** should avoid different box-size when checked/unchecked ([#533](https://github.com/digdir/designsystemet/issues/533)) ([52d368f](https://github.com/digdir/designsystemet/commit/52d368f02a7f59ef25aadea0323e22faa3c4d0f9)) -- **FieldSet:** :wheelchair: Fix wrong role on `ErrorMessage` ([#520](https://github.com/digdir/designsystemet/issues/520)) ([b0f8894](https://github.com/digdir/designsystemet/commit/b0f88948a56192787cb4d14a41937f3e82081fe1)) - -### Features - -- **Alert:** :sparkles: New React component `Alert` ([#510](https://github.com/digdir/designsystemet/issues/510)) ([8f36198](https://github.com/digdir/designsystemet/commit/8f361987963ba0dbbfc66b51c2241cd8da383c42)) -- **NativeSelect:** :sparkles: New React component `NativeSelect` ([#488](https://github.com/digdir/designsystemet/issues/488)) ([36eb3eb](https://github.com/digdir/designsystemet/commit/36eb3ebbe8e8d741d396f962fe55095b1e8def52)) - -# [0.14.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.13.0...@digdir/design-system-react@0.14.0) (2023-06-07) - -### Bug Fixes - -- **InputWrapper:** should only show invalid variant when field is invalid ([#502](https://github.com/digdir/designsystemet/issues/502)) ([556515c](https://github.com/digdir/designsystemet/commit/556515c1f3a244c1b5ce7bac9fcfbc878ba77ae3)) -- **Select:** :bug: Add zindex to dropdown ([#513](https://github.com/digdir/designsystemet/issues/513)) ([cf62384](https://github.com/digdir/designsystemet/commit/cf62384282d43ed417d5bd77a119b604d262bd84)) -- **Table:** Remove padding in header cells ([#485](https://github.com/digdir/designsystemet/issues/485)) ([17971e2](https://github.com/digdir/designsystemet/commit/17971e20015d07187ee316e7974a6a79c7712d80)) - -### Features - -- **Typography:** :sparkles: Define font color ([#511](https://github.com/digdir/designsystemet/issues/511)) ([5446557](https://github.com/digdir/designsystemet/commit/54465579e63caefc21f43635272a80b2a4805dda)) - -# [0.13.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.12.1...@digdir/design-system-react@0.13.0) (2023-05-31) - -### Bug Fixes - -- **Accordion:** :bug: Fix `displayName` for Accordion sub-components ([#424](https://github.com/digdir/designsystemet/issues/424)) ([c755c4a](https://github.com/digdir/designsystemet/commit/c755c4a8c19ac6d03a7dd51b32e4e3d92e33af3b)) -- **Accordion:** :bug: Use correct icon in header ([#473](https://github.com/digdir/designsystemet/issues/473)) ([7517690](https://github.com/digdir/designsystemet/commit/7517690873caf74d7eac6bc47f8f179df4a999a8)) -- **Accordion:** 🐛 Fix hover state on Accordion.Header when used on touch devies ([#435](https://github.com/digdir/designsystemet/issues/435)) ([8164dcc](https://github.com/digdir/designsystemet/commit/8164dcca1ebd81ada20a9347e943983f9eed6224)) -- **CheckboxRadioTemplate:** ensure to remove spacing/gap when label is hidden ([#427](https://github.com/digdir/designsystemet/issues/427)) ([f5a20e6](https://github.com/digdir/designsystemet/commit/f5a20e66b50254611373ee3efa1d827be5124520)) -- **InputWrapper, Select, Tabs, ToggleButtonGroup:** :recycle: Removed component defined font-family ([#476](https://github.com/digdir/designsystemet/issues/476)) ([2e65214](https://github.com/digdir/designsystemet/commit/2e6521401e0aabd9975ecc8ce6bcf7a4352ee662)) -- **Select:** Make options list independent of container size restrictions ([#449](https://github.com/digdir/designsystemet/issues/449)) ([6f8ce62](https://github.com/digdir/designsystemet/commit/6f8ce623af3ff09c817674289c94d802a04af912)) -- **TextField, TextArea:** append ids to aria-described-by ([#456](https://github.com/digdir/designsystemet/issues/456)) ([449988c](https://github.com/digdir/designsystemet/commit/449988c5d6ea69b9c52a61be481e61d6236b8f9c)) -- **Typography:** :bug: Fix Typography components to inherit font-family ([#470](https://github.com/digdir/designsystemet/issues/470)) ([06f6677](https://github.com/digdir/designsystemet/commit/06f66770df7bdc6f3a55f4d3567a0e2e249e8bf8)) - -## [0.12.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.12.0...@digdir/design-system-react@0.12.1) (2023-05-22) - -### Bug Fixes - -- Export `Accordion` component publicly ([#423](https://github.com/digdir/designsystemet/issues/423)) ([82adba2](https://github.com/digdir/designsystemet/commit/82adba2a4d894d4a8440f51e61694702cc6c3213)) - -# [0.12.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.11.1...@digdir/design-system-react@0.12.0) (2023-05-16) - -### Bug Fixes - -- **FieldSet:** Fixing typo in font size ([#372](https://github.com/digdir/designsystemet/issues/372)) ([287c8a4](https://github.com/digdir/designsystemet/commit/287c8a4cea2d0d310f4913873598a1bf5144dd33)) -- **Select:** Adjust list size to available space ([#383](https://github.com/digdir/designsystemet/issues/383)) ([2d11090](https://github.com/digdir/designsystemet/commit/2d1109013c5f50aadee39b4270483c45e973e137)) -- **TextField, TextArea, Checkbox, RadioButton, Button and HelpText:** New focus style ([#354](https://github.com/digdir/designsystemet/issues/354)) ([1786918](https://github.com/digdir/designsystemet/commit/1786918a90037cce2c6e300f271a62ea34d166c3)) - -### Features - -- **Accordion:** New Accordion component ([#313](https://github.com/digdir/designsystemet/issues/313)) ([62cc44b](https://github.com/digdir/designsystemet/commit/62cc44b05f35d5de30b6844859585967785be87c)) -- **TextArea, TextField:** Countdown remaining letters ([#365](https://github.com/digdir/designsystemet/issues/365)) ([6f08478](https://github.com/digdir/designsystemet/commit/6f08478e929c2740d0830edca453a2c68549fa61)) -- **Heading, Paragraph, Ingress, Label, ErrorMessage:** New Typography components ([#374](https://github.com/digdir/designsystemet/issues/374)) ([2bb07d6](https://github.com/digdir/designsystemet/commit/2bb07d6dbbcf277c24eeb06176e365cd366c5a20)) - -## [0.11.3](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.11.1...@digdir/design-system-react@0.11.3) (2023-05-04) - -### Bug Fixes - -- **Select:** Collapse when arrow button is clicked ([#336](https://github.com/digdir/designsystemet/issues/336)) ([254628a](https://github.com/digdir/designsystemet/commit/254628a7918dc037643b7157b40ad3e7031daeae)) -- **Select:** Set "button" type on buttons ([#338](https://github.com/digdir/designsystemet/issues/338)) ([f3035f0](https://github.com/digdir/designsystemet/commit/f3035f0b1a37fa406f4f85af084571335f3ace0a)) - -## [0.11.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.11.1...@digdir/design-system-react@0.11.2) (2023-04-24) - -### Bug Fixes - -- **InputWrapper:** Make input borders clickable ([#282](https://github.com/digdir/designsystemet/issues/282)) ([d35df3f](https://github.com/digdir/designsystemet/commit/d35df3f852359a0e21e9d05f8259158036db1206)) -- **Select:** fix aria-activedecendant attribute ([#291](https://github.com/digdir/designsystemet/issues/291)) ([0ed8958](https://github.com/digdir/designsystemet/commit/0ed89584083a66d20d4f37570825f023fc40c24a)) -- **Select:** Make event listeners local ([#299](https://github.com/digdir/designsystemet/issues/299)) ([1439820](https://github.com/digdir/designsystemet/commit/14398207f95816f13ff9133913c0ee40080c25f9)) -- **Table/RadioGroup/CheckboxGroup/FieldSet:** Multiple minor accessibility improvements ([#301](https://github.com/digdir/designsystemet/issues/301)) ([c299106](https://github.com/digdir/designsystemet/commit/c299106502175c220f1c051ec215b6fe25ef0bf7)) -- **Table:** Omitting `aria-sort` when no sort order is in effect ([#306](https://github.com/digdir/designsystemet/issues/306)) ([ecb1570](https://github.com/digdir/designsystemet/commit/ecb1570fdad1c9182fa3ee51154721a674324e0c)) -- **Table:** Sort-arrows fix ([#297](https://github.com/digdir/designsystemet/issues/297)) ([fbc8e50](https://github.com/digdir/designsystemet/commit/fbc8e5083802667f3fbc664637c36a7881cde040)) -- **TextArea:** Set border ([#310](https://github.com/digdir/designsystemet/issues/310)) ([255f632](https://github.com/digdir/designsystemet/commit/255f632c128a0c7a41fd466d63d285495401eac1)) - -### BREAKING CHANGE - -- **Accordion** was renamed to LegacyAccordion to make room for new “Accordion” component in accordance with new design & features ([#296](https://github.com/digdir/designsystemet/issues/296))([83d7e6c](https://github.com/digdir/designsystemet/commit/83d7e6cabf3df97a252d56196d6583d847b6f663)) - -## [0.11.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.11.0...@digdir/design-system-react@0.11.1) (2023-04-11) - -### Bug Fixes - -- **Select:** Make onBlur work when there is no active element ([#281](https://github.com/digdir/designsystemet/issues/281)) ([cd1f43c](https://github.com/digdir/designsystemet/commit/cd1f43ccc78b77baf11a4f01221572ffd13470fe)) -- **Select:** Update selected on option change ([#286](https://github.com/digdir/designsystemet/issues/286)) ([623d306](https://github.com/digdir/designsystemet/commit/623d3067025f2da9359479d77f0dfcc29d4ac9d6)) - -# [0.11.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.10.2...@digdir/design-system-react@0.11.0) (2023-03-30) - -### Features - -- **Select:** Add onFocus and onBlur events ([#278](https://github.com/digdir/designsystemet/issues/278)) ([7fc362c](https://github.com/digdir/designsystemet/commit/7fc362c735f8f31f0b49ba65c8a98d90133db3cc)) - -## [0.10.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.10.1...@digdir/design-system-react@0.10.2) (2023-03-30) - -### Bug Fixes - -- **Textfield:** upgrading `react-number-format`, removing workaround ([e2dc0e6](https://github.com/digdir/designsystemet/commit/e2dc0e62093af9a7feb83bf2f6ee55ab7b1082e0)) - -## [0.10.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.10.0...@digdir/design-system-react@0.10.1) (2023-03-29) - -### Bug Fixes - -- **Accordion:** Fix continous texts word break ([#264](https://github.com/digdir/designsystemet/issues/264)) ([13b3bd6](https://github.com/digdir/designsystemet/commit/13b3bd6fb6a336ae1db86ea79555dde257162fa0)) -- **Button:** adjust padding to make icon round ([#265](https://github.com/digdir/designsystemet/issues/265)) ([922014d](https://github.com/digdir/designsystemet/commit/922014d14f8316421c17b5ffb435acb2ba2c51ae)) -- **RadioButton:** RadioButton looks wrong when zoming in browser ([#266](https://github.com/digdir/designsystemet/issues/266)) ([5f40bc3](https://github.com/digdir/designsystemet/commit/5f40bc35e0ed6f1c1e2535b0d45a38d18b1768c0)) -- **Select:** Display initial value on single select ([#268](https://github.com/digdir/designsystemet/issues/268)) ([7ad5f0f](https://github.com/digdir/designsystemet/commit/7ad5f0fa6345577993dca28c0bb6066c9595634d)) -- **ToggleButtonGroup:** Set correct button type ([#261](https://github.com/digdir/designsystemet/issues/261)) ([a706f07](https://github.com/digdir/designsystemet/commit/a706f0773acbf5bf4766d915af95696cdfaa67af)) - -# [0.10.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.9.0...@digdir/design-system-react@0.10.0) (2023-03-24) - -### Bug Fixes - -- **Select:** NVDA screen reader issues ([#246](https://github.com/digdir/designsystemet/issues/246)) ([3a57e6c](https://github.com/digdir/designsystemet/commit/3a57e6c0cba74989758c4900d0130705f9b160e3)) -- **Select:** Support dynamically changing options ([#253](https://github.com/digdir/designsystemet/issues/253)) ([5b13f7c](https://github.com/digdir/designsystemet/commit/5b13f7c13590f71547caa0e90c7f0d85e610c4af)) - -### Features - -- Add toggle button component ([#258](https://github.com/digdir/designsystemet/issues/258)) ([2ecbe69](https://github.com/digdir/designsystemet/commit/2ecbe69fa8fe1d35f1ca91f8e7eef1f0f762f209)) - -# [0.9.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.8.1...@digdir/design-system-react@0.9.0) (2023-03-17) - -### Bug Fixes - -- **Button:** Remove width in css for buttons with only icons ([#232](https://github.com/digdir/designsystemet/issues/232)) ([4962e49](https://github.com/digdir/designsystemet/commit/4962e49de0b69d33f6c7b884021819c6a9b5c86c)) -- **CheckboxGroup:** Improved item update handling ([#241](https://github.com/digdir/designsystemet/issues/241)) ([9a157df](https://github.com/digdir/designsystemet/commit/9a157dfb6805b3e54930f2d555a18c7117fab577)) -- use ReactNode in helptexts to allow rich content ([#245](https://github.com/digdir/designsystemet/issues/245)) ([4469c7d](https://github.com/digdir/designsystemet/commit/4469c7d653cb612e94e35b82fc97bdf622c5b5a3)) - -### Features - -- **Button:** Added support for aria-disabled to button and loading button example in storybook ([#240](https://github.com/digdir/designsystemet/issues/240)) ([51992e8](https://github.com/digdir/designsystemet/commit/51992e8bf329e6b3cb38c0a88c36ef0ac20c9a84)) - -## [0.8.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.8.0...@digdir/design-system-react@0.8.1) (2023-03-09) - -**Note:** Version bump only for package @digdir/design-system-react - -# [0.8.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.7.0...@digdir/design-system-react@0.8.0) (2023-03-09) - -### Bug Fixes - -- **CheckboxGroup:** fix state handling problem ([#205](https://github.com/digdir/designsystemet/issues/205)) ([50aab5a](https://github.com/digdir/designsystemet/commit/50aab5ad8152083c9c4efaa8b7fac48ed77284ce)) -- **HelpText:** helptext´s content not reachable with NVDA screenreader ([#206](https://github.com/digdir/designsystemet/issues/206)) ([e4c115f](https://github.com/digdir/designsystemet/commit/e4c115f11d95442372fbcee3c690ed617de0860a)) -- Set correct font size in all text input fields ([#201](https://github.com/digdir/designsystemet/issues/201)) ([2f1a903](https://github.com/digdir/designsystemet/commit/2f1a9030b94c6938d8b8719cf6ed7f92d4eaa4b6)) - -### Features - -- Add table component ([#207](https://github.com/digdir/designsystemet/issues/207)) ([c07a288](https://github.com/digdir/designsystemet/commit/c07a288daac0cc39e8bc8e78b5e214cb3c45a2f8)) - -# [0.7.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.6.0...@digdir/design-system-react@0.7.0) (2023-02-24) - -### Bug Fixes - -- **HelpText:** hide helptext button in pdfs ([#156](https://github.com/digdir/designsystemet/issues/156)) ([7b9c217](https://github.com/digdir/designsystemet/commit/7b9c2174b8095f7fe56c205d4a462168b734e950)) - -### Features - -- **HelpText:** take reactnode instead of string ([#181](https://github.com/digdir/designsystemet/issues/181)) ([2c1a8df](https://github.com/digdir/designsystemet/commit/2c1a8df08ea91a81f95252db8c12d5a6229f9188)) -- **Spinner:** Add spinner component ([#162](https://github.com/digdir/designsystemet/issues/162)) ([deb6fec](https://github.com/digdir/designsystemet/commit/deb6fec8524bae70a001d330ac3ca15330879ff2)) - -# [0.6.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.5.1...@digdir/design-system-react@0.6.0) (2023-02-16) - -### Bug Fixes - -- **HelpText:** fix help-text width ([#149](https://github.com/digdir/designsystemet/issues/149)) ([e0ddf38](https://github.com/digdir/designsystemet/commit/e0ddf3895994f1b276e851f74de495a33e4d964a)) -- **Popover:** fix display-issue-with-popover-arrow ([#152](https://github.com/digdir/designsystemet/issues/152)) ([2b3e311](https://github.com/digdir/designsystemet/commit/2b3e3112407fdc86dcc092b1d93c34c9f76dbf69)) - -### Features - -- **List:** Add list component ([#153](https://github.com/digdir/designsystemet/issues/153)) ([f3befb9](https://github.com/digdir/designsystemet/commit/f3befb9643f9c5be440426d8f57f3542ea44cf61)) -- **Select:** Search and formatting ([#151](https://github.com/digdir/designsystemet/issues/151)) ([d26ea78](https://github.com/digdir/designsystemet/commit/d26ea78a8cb2ce6d12f60c4faa2ec0202ff37054)) - -## [0.5.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.5.0...@digdir/design-system-react@0.5.1) (2023-02-13) - -### Bug Fixes - -- **Accordion:** Fix subtitle placement issues ([#144](https://github.com/digdir/designsystemet/issues/144)) ([316e450](https://github.com/digdir/designsystemet/commit/316e4502d3b34a90ca577a45bbb367f547f6fb96)) -- **Button:** Enforce icon button to have same width and height ([#139](https://github.com/digdir/designsystemet/issues/139)) ([9b3bb93](https://github.com/digdir/designsystemet/commit/9b3bb93fc0e73b10a7522c07f54ca250b3d686b8)) -- **HelpText:** export help text size prop ([#147](https://github.com/digdir/designsystemet/issues/147)) ([7a716bb](https://github.com/digdir/designsystemet/commit/7a716bbed965ec8fb5f01799c7aea32be4fdd8e3)) -- **InputWrapper:** Change outline style to solid from auto to make outline-offset work ([#140](https://github.com/digdir/designsystemet/issues/140)) ([ef2a9f4](https://github.com/digdir/designsystemet/commit/ef2a9f4e003d6c7ca3ac72a1e4b3e915d4a174a7)) - -# [0.5.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.4.3...@digdir/design-system-react@0.5.0) (2023-02-08) - -### Bug Fixes - -- added displayName to all exported components ([#135](https://github.com/digdir/designsystemet/issues/135)) ([7f0dd1b](https://github.com/digdir/designsystemet/commit/7f0dd1b01930e0a3dfd5117f6a5277d08dc1ebd7)) -- **Button:** Replace non existent Figma token ([#128](https://github.com/digdir/designsystemet/issues/128)) ([b27e3d4](https://github.com/digdir/designsystemet/commit/b27e3d4cb67da0f9ae70d3f4d4b6f71a777b7bae)) -- **Select:** Accept empty list of options ([#133](https://github.com/digdir/designsystemet/issues/133)) ([515e84f](https://github.com/digdir/designsystemet/commit/515e84f40edbec392041769e93aaf90f474aaa78)) - -### Features - -- **Accordion:** Add accordion component ([#130](https://github.com/digdir/designsystemet/issues/130)) ([5cf8bf2](https://github.com/digdir/designsystemet/commit/5cf8bf20f5c59f1d9bca45af4c9cbceb017f22cf)) - -## [0.4.3](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.4.2...@digdir/design-system-react@0.4.3) (2023-02-02) - -### Bug Fixes - -- **Button:** Only icon padding ([#109](https://github.com/digdir/designsystemet/issues/109)) ([7a4c286](https://github.com/digdir/designsystemet/commit/7a4c28622a3e558d36fa4c526b0d0e3c9a875bc8)) -- **help text:** add title to helptext tests ([#126](https://github.com/digdir/designsystemet/issues/126)) ([9b3fc86](https://github.com/digdir/designsystemet/commit/9b3fc8686bf56eca2f69f80b4f02e3ee4e281b58)) -- **Select:** Set higher z-index on option list ([#114](https://github.com/digdir/designsystemet/issues/114)) ([f6077a6](https://github.com/digdir/designsystemet/commit/f6077a645509001edc482e075a3a5df5ffa87076)) -- Set font and min height on input fields ([#112](https://github.com/digdir/designsystemet/issues/112)) ([e7671fa](https://github.com/digdir/designsystemet/commit/e7671fabed4b9ab9d3094a44651e5f8797012bb9)) -- Update Figma tokens ([#111](https://github.com/digdir/designsystemet/issues/111)) ([8e0edd8](https://github.com/digdir/designsystemet/commit/8e0edd819c6483ea9a372bb44f13ad8f3af38cc9)) -- update figma-token for CheckboxRadioTemplate ([df69b2a](https://github.com/digdir/designsystemet/commit/df69b2a2c366b4c46baa67a8f84c3358357b5324)) - -## [0.4.2](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.4.1...@digdir/design-system-react@0.4.2) (2023-01-30) - -### Bug Fixes - -- added types file to export ([99a33f9](https://github.com/digdir/designsystemet/commit/99a33f9b8c2b61019dbd7a04a911ab9f3b833a89)) - -## [0.4.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.4.0...@digdir/design-system-react@0.4.1) (2023-01-27) - -### Bug Fixes - -- **popover:** popover screen reader ordering ([c8a0190](https://github.com/digdir/designsystemet/commit/c8a0190d887b95b1e0ea0178c1a2e51f93d48c24)) - -# [0.4.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.3.1...@digdir/design-system-react@0.4.0) (2023-01-26) - -### Bug Fixes - -- **popover:** retain focus on trigger when opening popover ([d54c7c8](https://github.com/digdir/designsystemet/commit/d54c7c8293372415a560bb334f2c2df1ed342d7c)) -- **Tabs:** Spacing issues ([#95](https://github.com/digdir/designsystemet/issues/95)) ([2583e4c](https://github.com/digdir/designsystemet/commit/2583e4c8f1205bd5d7c9882ebfc55edf7efd0959)) - -### Features - -- **help-text:** add help text component ([8f2bb3b](https://github.com/digdir/designsystemet/commit/8f2bb3bc682b9bfec650fe2813d402c94771a6d3)) -- **popover:** added popover component ([6e34adf](https://github.com/digdir/designsystemet/commit/6e34adfebed9742c7145fcc3e2e99b2075fe8081)) - -## [0.3.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.3.0...@digdir/design-system-react@0.3.1) (2023-01-24) - -### Bug Fixes - -- Export issues ([#72](https://github.com/digdir/designsystemet/issues/72)) ([716e9d7](https://github.com/digdir/designsystemet/commit/716e9d7892be4ef7f21864338fd299a2f98a6784)) - -# [0.3.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.2.1...@digdir/design-system-react@0.3.0) (2023-01-23) - -### Bug Fixes - -- **select:** Value update in Select component ([#63](https://github.com/digdir/designsystemet/issues/63)) ([0a4677c](https://github.com/digdir/designsystemet/commit/0a4677cc00cc1b316ca17d5522a10c7385817fed)) - -### Features - -- **textfield:** Add text field component ([#67](https://github.com/digdir/designsystemet/issues/67)) ([ba7e8a5](https://github.com/digdir/designsystemet/commit/ba7e8a5484f1fc75ec982eb666c1a94e3594cdea)) - -## [0.2.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.2.0...@digdir/design-system-react@0.2.1) (2023-01-19) - -### Bug Fixes - -- Presentation mode issues on checkboxes and radio buttons ([#61](https://github.com/digdir/designsystemet/issues/61)) ([2ee07b4](https://github.com/digdir/designsystemet/commit/2ee07b46794580bf255091fcc142b793c8a91682)) - -# [0.2.0](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.1.1...@digdir/design-system-react@0.2.0) (2023-01-19) - -### Bug Fixes - -- **button:** Export button props ([#52](https://github.com/digdir/designsystemet/issues/52)) ([604caed](https://github.com/digdir/designsystemet/commit/604caed26dbd16b225c1c5dc41d8eb98eba94f10)) - -### Features - -- **textarea:** Add TextArea component ([#59](https://github.com/digdir/designsystemet/issues/59)) ([1938b7d](https://github.com/digdir/designsystemet/commit/1938b7dd541e4c3508b0942b14c87ac64dc7c7f7)) - -## [0.1.1](https://github.com/digdir/designsystemet/compare/@digdir/design-system-react@0.1.0...@digdir/design-system-react@0.1.1) (2023-01-12) - -### Bug Fixes - -- testing changelog with new release commands ([4906c28](https://github.com/digdir/designsystemet/commit/4906c28e4b6972d7c5d93e4ab630fe5d52d8fdb2)) - -# 0.1.0 (2023-01-11) - -### Features - -- testing changelogs for the react package ([f988027](https://github.com/digdir/designsystemet/commit/f9880278d774c4892e4792ad2f14d40d662e5206)) diff --git a/packages/react-old/README.md b/packages/react-old/README.md deleted file mode 100644 index 1b101b5e10..0000000000 --- a/packages/react-old/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Deprecated - -Replaced by `@digdir/designsystemet-react`. - -Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started. - -## @digdir/design-system-react - -Legacy React components of the Designsystemet diff --git a/packages/react-old/declarations.d.ts b/packages/react-old/declarations.d.ts deleted file mode 100644 index 367809a66c..0000000000 --- a/packages/react-old/declarations.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -declare module '*.svg' { - import React = require('react'); - export const ReactComponent: React.FunctionComponent< - React.SVGProps - >; - const src: string; - export default src; -} - -declare module '*.css' { - const styles: { [className: string]: string }; - export default styles; -} - -declare module '*.png' { - const value: string; - export = value; -} -declare module '*.jpg' { - const value: string; - export = value; -} diff --git a/packages/react-old/package.json b/packages/react-old/package.json deleted file mode 100644 index d61c6d6999..0000000000 --- a/packages/react-old/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "@digdir/design-system-react", - "version": "0.54.0", - "description": "Legacy React components for Designsystemet", - "author": "Designsystemet team", - "repository": "https://github.com/digdir/designsystemet", - "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/react-old", - "license": "MIT", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", - "sideEffects": false, - "private": true, - "files": [ - "dist/**" - ], - "scripts": { - "build": "yarn run clean && tsc -p tsconfig.build.json && yarn run copy-files && rollup -c --bundleConfigAsCjs", - "clean": "rimraf dist && rimraf tsc-build", - "copy-files": "copyfiles -u 1 ./src/**/*.css ./tsc-build/", - "types": "tsc --noEmit" - }, - "peerDependencies": { - "react": ">=18.3.1", - "react-dom": ">=18.3.1" - }, - "publishConfig": { - "access": "public" - }, - "dependencies": { - "@altinn/figma-design-tokens": "^6.0.1", - "@floating-ui/react": "0.26.4", - "@navikt/aksel-icons": "^5.12.2", - "react-number-format": "5.3.1" - }, - "devDependencies": { - "@types/fs-extra": "^11.0.4", - "copyfiles": "^2.4.1", - "cssnano": "^6.0.2", - "fs-extra": "^11.2.0", - "postcss": "^8.4.35", - "rimraf": "^5.0.5", - "rollup": "^4.12.1", - "typescript": "^5.4.2" - } -} diff --git a/packages/react-old/rollup.config.js b/packages/react-old/rollup.config.js deleted file mode 100644 index c072fcab4e..0000000000 --- a/packages/react-old/rollup.config.js +++ /dev/null @@ -1,52 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import postcss from 'rollup-plugin-postcss'; -import peerDepsExternal from 'rollup-plugin-peer-deps-external'; -import cssnano from 'cssnano'; - -import { generateScopedName } from './scripts/name'; - -export default [ - { - input: './tsc-build/index.js', - output: [ - { - dir: './dist/cjs', - format: 'cjs', - banner: "'use client';", - // preserveModules: true, - // preserveModulesRoot: 'tsc-build', - }, - { - dir: './dist/esm', - format: 'es', - banner: "'use client';", - // preserveModules: true, - // preserveModulesRoot: 'tsc-build', - }, - ], - external: [ - /@digdir\/designsystemet-react/, - /@altinn\/figma-design-tokens.*(? - -# LegacyCheckbox - - - -`LegacyCheckbox` er en boks som brukeren kan krysse av i for bolske verdier. Den kan også brukes i en gruppe hvor brukeren kan velge flere verdier. - -## Props - - - - -## Bruk - -For øyblikket støtter komponenten kun kontrollert modus. -Det vil si at koden på utsiden må sørge for at `checked`-attributten blir satt til `true` eller `false` idet `onChange`-funksjonen blir kalt. - -```tsx -import '@altinn/figma-design-tokens/dist/tokens.css'; // Importeres kun én gang i din applikasjon -import { LegacyCheckbox } from '@digdir/design-system-react'; -import React, { useState } from 'react'; - -export const Component = () => { - const [checked, setChecked] = useState(false); - return ( - setChecked(event.target.checked)} - /> - ); -}; -``` - -## Eksempler - -Sjekkboksene kan ha flere forskjellige statuser: - - - - - - - - -Man kan også velge å legge til en beskrivelse: - - - -Sjekkboksen blir midtjustert med første linje selv om teksten går over flere linjer: - - - -I noen tilfeller kan det være nødvendig å vise en sjekkboks uten tekst, for eksempel i en tabell. -Man må da sørge for at sjekkboksen likevel har en tekst som er tilgjengelig for skjermlesere. -Dette kan man gjøre ved å sette `label`-attributten på vanlig måte og sette `hideLabel` til `true`. - - - -## Egenskaper - -`LegacyCheckbox` er en kontrollert komponent; det vil si at det er opp til foreldrenoden å holde styr på om sjekkboksen er avkrysset eller ikke. -Dette gjøres ved å sette `checked`-attributten til `true` eller `false` idet `onChange`-funksjonen blir kalt. - - diff --git a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.module.css b/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.module.css deleted file mode 100644 index d0f22d0c0a..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.module.css +++ /dev/null @@ -1,64 +0,0 @@ -.checkbox { - /* Internal variables */ - --checkbox-background_color: var(--component-checkbox-color-background-default); - --checkbox-border_color: var(--component-checkbox-color-border-default); - --checkbox-border_radius: var(--interactive_components-border_radius-normal); - --checkbox-border_width: var(--component-checkbox-border_width-small); - --checkbox-checkmark-visibility: hidden; - --checkbox-height: var(--component-checkbox-size-height-small); - --checkbox-width: var(--component-checkbox-size-width-small); - - /* Variables used by CheckboxRadioTemplate */ - --input_box-size: var(--checkbox-height); - --input_box-border_radius: var(--checkbox-border_radius); -} - -.checkbox.compact { - --checkbox-border_width: var(--component-checkbox-border_width-xsmall); - --checkbox-height: var(--component-checkbox-size-height-xsmall); - --checkbox-width: var(--component-checkbox-size-width-xsmall); -} - -.checkbox.error { - --checkbox-background_color: var(--component-checkbox-color-background-error); - --checkbox-border_color: var(--component-checkbox-color-border-error); -} - -.checkbox.checked { - --checkbox-checkmark-visibility: visible; - --checkbox-background_color: var(--component-checkbox-color-background-checked); - --checkbox-border_color: var(--component-checkbox-color-border-checked); -} - -.checkbox:not(.disabled, .checked):hover { - --checkbox-background_color: var(--component-checkbox-color-background-hover); -} - -.checkbox:not(.disabled, .error, .checked):hover { - --checkbox-border_color: var(--component-checkbox-color-border-hover); -} - -.checkbox.readOnly { - --cursor: auto; -} - -.visibleBox { - background-color: var(--checkbox-background_color); - border-color: var(--checkbox-border_color); - border-radius: var(--checkbox-border_radius); - border-style: solid; - border-width: var(--checkbox-border_width); - box-sizing: border-box; - display: inline-block; - height: var(--checkbox-height); - width: var(--checkbox-width); -} - -.checkmark { - background-color: white; - clip-path: polygon(47.11% 56.51%, 30.37% 38.94%, 21.5% 48.09%, 47.11% 74.54%, 81.5% 39.16%, 72.63% 30%); - display: inline-block; - visibility: var(--checkbox-checkmark-visibility); - height: 100%; - width: 100%; -} diff --git a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.stories.tsx b/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.stories.tsx deleted file mode 100644 index 7b1f2dfe16..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.stories.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import type { Meta, StoryFn, StoryObj } from '@storybook/react'; - -import { LegacyCheckbox } from './Checkbox'; - -type Story = StoryObj; - -export default { - title: 'Avviklet/LegacyCheckbox', - component: LegacyCheckbox, -} as Meta; - -export const Preview: Story = { - args: { - label: 'Dette er en checkbox', - helpText: - 'Checkbox er en boks som brukeren kan krysse av i for bolske verdier', - checkboxId: 'checkbox-id', - checked: false, - compact: false, - description: 'Dette er en beskrivelse', - disabled: false, - error: false, - hideLabel: false, - name: 'checkbox-name', - presentation: false, - readOnly: false, - }, -}; - -export const Normal: StoryFn = (args) => ( - -); - -Normal.args = { - label: 'Normal', -}; - -export const Avkrysset: StoryFn = (args) => ( - -); - -Avkrysset.args = { - checked: true, - label: 'Avkrysset', -}; - -export const MedHjelpetekst: StoryFn = (args) => ( - -); - -MedHjelpetekst.args = { - helpText: 'Hjelp', - label: 'Med hjelpetekst', -}; - -export const Feil: StoryFn = (args) => ( - -); - -Feil.args = { - checked: false, - error: true, - label: 'Normal', -}; - -export const Kompakt: StoryFn = (args) => ( - -); - -Kompakt.args = { - compact: true, - label: 'Kompakt', -}; - -export const Deaktivert: StoryFn = (args) => ( - -); - -Deaktivert.args = { - disabled: true, - label: 'Deaktivert', -}; - -export const MedBeskrivelse: StoryFn = (args) => ( - -); - -MedBeskrivelse.args = { - description: 'Med beskrivelse', - label: 'Tekst', -}; - -export const MedLangTekst: StoryFn = (args) => ( - -); - -MedLangTekst.args = { - label: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus dolor, consectetur nec finibus quis, varius et risus. Nullam sodales enim viverra metus finibus, id pellentesque erat sagittis. Curabitur mattis eleifend nunc, eget fringilla odio viverra et. Nullam pretium vel tortor quis varius. Sed dui justo, placerat eu lorem vestibulum, condimentum fringilla ante. Curabitur egestas, ante a pharetra rhoncus, velit lorem luctus lectus, sit amet finibus est sem a ante. Mauris tristique aliquam libero ut commodo. Mauris vel justo et nulla rutrum commodo eu sit amet est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Sed aliquet egestas augue in placerat. Quisque malesuada elementum dolor, in ultricies est sodales varius.', -}; - -export const MedSkjultTekst: StoryFn = (args) => ( - -); - -MedSkjultTekst.args = { - hideLabel: true, - label: 'Skjult tekst', -}; diff --git a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.test.tsx b/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.test.tsx deleted file mode 100644 index c22b86306c..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.test.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import assert from 'assert'; - -import { render as renderRtl, screen } from '@testing-library/react'; -import { act } from 'react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import type { LegacyCheckboxProps } from '.'; -import { LegacyCheckbox } from '.'; - -const user = userEvent.setup(); - -const onChange = vi.fn(); -const defaultProps: LegacyCheckboxProps = { - onChange, -}; - -describe('Checkbox', () => { - afterEach(() => { - vi.restoreAllMocks(); - }); - - it('Should not be checked by default', () => { - render(); - const checkbox = screen.getByRole('checkbox'); - expect(checkbox).not.toBeChecked(); - }); - - it('Should be checked if the "checked" prop is true', () => { - render({ checked: true }); - const checkbox = screen.getByRole('checkbox'); - expect(checkbox).toBeChecked(); - }); - - it('Should call onChange when user clicks', async () => { - const onChange = vi.fn(); - const wrapper = renderAndGetWrapper({ onChange }); - await act(() => user.click(wrapper)); - expect(onChange).toHaveBeenCalled(); - }); - - it('Should not call onChange when user clicks and the checkbox is disabled', async () => { - const onChange = vi.fn(); - const wrapper = renderAndGetWrapper({ disabled: true, onChange }); - await act(() => user.click(wrapper)); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Should not display checkbox when read-only', () => { - render({ checked: false, readOnly: true }); - const checkboxes = screen.queryAllByRole('checkbox'); - expect(checkboxes).toHaveLength(0); - }); - - it('Should display label text', () => { - const label = 'Lorem ipsum'; - render({ label }); - expect(screen.getByText(label)).toBeDefined(); - }); - - it('Should not display label text, but still make it accessible, when hideLabel is true', () => { - const label = 'Lorem ipsum'; - render({ hideLabel: true, label }); - expect(screen.getByText(label).style.display).toEqual('none'); - expect(screen.getByLabelText(label)).toBeTruthy(); - }); - - it('Should render checkbox with given checkboxId', () => { - const checkboxId = 'the-checkbox'; - render({ checkboxId }); - const checkbox = screen.getByRole('checkbox'); - expect(checkbox.id).toEqual(checkboxId); - }); - - it('Should render checkbox with given name', () => { - const name = 'the-checkbox'; - render({ name }); - const checkbox = screen.getByRole('checkbox'); - expect(checkbox.getAttribute('name')).toEqual(name); - }); - - it('Should display description', () => { - const description = 'Lorem ipsum dolor sit amet'; - render({ description }); - expect(screen.getByText(description)).toBeDefined(); - }); - - it.each([false, undefined])( - 'Does not have presentation role when the "presentation" property is %s', - (presentation) => { - render({ presentation }); - expect(screen.queryByRole('presentation')).toBeFalsy(); - }, - ); - - it('Has presentation role when the "presentation" property is true', () => { - render({ presentation: true }); - expect(screen.getByRole('presentation')).toBeInTheDocument(); - expect(screen.queryByRole('checkbox')).toBeFalsy(); - }); - - it('Displays label and description when they are React nodes', () => { - const labelText = 'Label'; - const descriptionText = 'Description'; - render({ - label: {labelText}, - description: {descriptionText}, - }); - expect(screen.getByText(labelText)).toBeInTheDocument(); - expect(screen.getByText(descriptionText)).toBeInTheDocument(); - }); - - it('Has clickable label text by default if label is set', async () => { - const label = 'Label'; - render({ label }); - await act(() => user.click(screen.getByText(label))); - expect(onChange).toHaveBeenCalled(); - }); - - it('Does not have clickable label text if the "presentation" property is true and the label is a React node', async () => { - const labelText = 'Label'; - render({ - label: {labelText}, - presentation: true, - }); - await act(() => user.click(screen.getByText(labelText))); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Does not have clickable label text if the "presentation" property is true and the description is a React node', async () => { - const descriptionText = 'Description'; - render({ - label: {descriptionText}, - presentation: true, - }); - await act(() => user.click(screen.getByText(descriptionText))); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Has clickable checkbox even if the "presentation" property is true and the label is a React node', async () => { - const name = 'Label'; - render({ - label: {name}, - presentation: true, - }); - await act(() => user.click(screen.getByRole('presentation', { name }))); - expect(onChange).toHaveBeenCalled(); - }); -}); - -const render = (props: Partial = {}) => { - const allProps = { ...defaultProps, ...props }; - return renderRtl(); -}; - -const renderAndGetWrapper = ( - props: Partial = {}, -): Element => { - const { container } = render(props); - const wrapper = container.querySelector('.checkbox'); - assert(wrapper !== null); - return wrapper; -}; diff --git a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.tsx b/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.tsx deleted file mode 100644 index 4e30846af8..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckbox/Checkbox.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import type { ChangeEventHandler, ReactNode } from 'react'; -import cl from 'clsx'; - -import { CheckboxRadioTemplate } from '../_CheckboxRadioTemplate'; - -import classes from './Checkbox.module.css'; - -export interface LegacyCheckboxProps { - /** - * An ID that will be applied to the ID attribute of the checkbox element. - * It will be automatically generated to a random value if not set. - */ - checkboxId?: string; - - /** - * Set to `true` to disable the checkbox. - * This is currently the only way to set the `checked` mode, as uncontrolled mode is not supported yet. - */ - checked?: boolean; - - /** Set to `true` to apply compact styling, making the checkbox smaller. */ - compact?: boolean; - - /** The description of the checkbox. This will appear below the label. */ - description?: ReactNode; - - /** Set to `true` to disable the checkbox. */ - disabled?: boolean; - - /** Set to `true` to apply error styling to the checkbox. */ - error?: boolean; - - /** Set this to make a clickable help icon appear to the right for the label. The content will appear when the user clicks on it. */ - helpText?: ReactNode; - - /** Set to `true` to visually hide the label text, but still make it accessible to tools like screen readers. */ - hideLabel?: boolean; - - /** The label of the checkbox. */ - label?: ReactNode; - - /** The name of the checkbox. */ - name?: string; - - /** - * A callback that will be called when the checkbox is toggled. - * Use this function to get the current `checked` value. - */ - onChange: ChangeEventHandler; - - /** - * Set to `true` if this checkbox is a part of a preview and does not provide anything to the functionality of the application. - * In this mode, the label text will not be clickable unless it is a plain text. - * This allows having clickable elements inside the label text. - */ - presentation?: boolean; - - /** Set to `true` to apply read-only mode. */ - readOnly?: boolean; -} -/** - * @note Replaced by new {@link https://storybook.designsystemet.no/?path=/docs/komponenter-checkbox--docs Checkbox} component. - */ -const LegacyCheckbox = ({ - checkboxId, - checked = false, - compact = false, - description, - disabled = false, - error = false, - helpText, - hideLabel, - label, - name, - onChange, - presentation = false, - readOnly = false, -}: LegacyCheckboxProps) => ( - - - - - -); - -LegacyCheckbox.displayName = 'LegacyCheckbox'; - -export { LegacyCheckbox }; diff --git a/packages/react-old/src/components/legacy/LegacyCheckbox/index.ts b/packages/react-old/src/components/legacy/LegacyCheckbox/index.ts deleted file mode 100644 index f5c939faf4..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Checkbox'; diff --git a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.module.css b/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.module.css deleted file mode 100644 index dba7e8c27a..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.checkboxGroup { - --gap-x: var(--component-checkbox-group-space-gap-x-small); - --gap-y: var(--component-checkbox-group-space-gap-y-small); - - column-gap: var(--gap-x); - display: flex; - flex-wrap: wrap; - row-gap: var(--gap-y); -} - -.checkboxGroup.compact { - --gap-x: var(--component-checkbox-group-space-gap-x-xsmall); - --gap-y: var(--component-checkbox-group-space-gap-y-xsmall); -} - -.checkboxGroup.vertical { - flex-direction: column; -} - -.checkboxGroup.horizontal { - flex-direction: row; -} diff --git a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx b/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx deleted file mode 100644 index 0a920c71fb..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx +++ /dev/null @@ -1,176 +0,0 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import { LegacyCheckboxGroup } from './index'; - - - -export const defaultArgs = { - compact: false, - description: 'Velg én eller flere planeter fra listen.', - disabled: false, - items: [ - { checked: false, label: 'Merkur', name: 'planet1' }, - { checked: false, label: 'Venus', name: 'planet2' }, - { checked: false, label: 'Jorden', name: 'planet3' }, - { checked: false, label: 'Mars', name: 'planet4' }, - { checked: false, label: 'Jupiter', name: 'planet5' }, - { checked: false, label: 'Saturn', name: 'planet6' }, - { checked: false, label: 'Uranus', name: 'planet7' }, - { checked: false, label: 'Neptun', name: 'planet8' }, - ], - legend: 'Velg planeter', - variant: 'vertical', -}; -export const Template = (args = {}) => ( - -); - -# LegacyCheckboxGroup - - - -`LegacyCheckboxGroup` er en gruppe med sjekkbokser som gir brukeren mulighet til å velge flere verdier i en liste. - -## Eksempler - -### Vertikal visning - - - - {Template.bind({})} - - - -### Horisontal visning - - - - {Template.bind({})} - - - -### Kompakt visning - - - - {Template.bind({})} - - - -### Med feilmelding - - - - {Template.bind({})} - - - -### Med hjelpetekst - - - - {Template.bind({})} - - - -### Deaktivert - - - - {Template.bind({})} - - - -## Egenskaper - - diff --git a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.test.tsx b/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.test.tsx deleted file mode 100644 index e54cd9d964..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.test.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { render as renderRtl, screen } from '@testing-library/react'; -import { act } from 'react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import { LegacyCheckboxGroup } from '.'; -import type { LegacyCheckboxGroupProps, LegacyCheckboxGroupItem } from '.'; - -const user = userEvent.setup(); - -const defaultProps: LegacyCheckboxGroupProps = { - items: [ - { label: 'Test 1', name: 'test1' }, - { label: 'Test 2', name: 'test2' }, - ], -}; - -describe('CheckboxGroup', () => { - it('Should display a checkbox for each item', () => { - render(); - expect(screen.queryAllByRole('checkbox')).toHaveLength( - defaultProps.items.length, - ); - }); - - it('Should display legend', () => { - const legend = 'Lorem ipsum'; - render({ legend }); - expect(screen.getByText(legend)).toBeDefined(); - }); - - it('Should display description', () => { - const description = 'Lorem ipsum dolor sit amet'; - render({ description }); - expect(screen.getByText(description)).toBeDefined(); - }); - - it('Should display error message if given', () => { - const error = 'Something is wrong'; - render({ error }); - expect(screen.getByText(error)).toBeDefined(); - }); - - it('Should throw an error if there are duplicate names', () => { - const renderFn = () => - render({ - items: [ - { label: 'Test 1', name: 'duplicated name' }, - { label: 'Test 2', name: 'duplicated name' }, - ], - }); - vi.spyOn(console, 'error').mockImplementation(vi.fn()); // Keeps the console output clean - expect(renderFn).toThrow('Each name in the checkbox group must be unique.'); - }); - - it('Should call onChange handler with an array of the selected names when a checkbox is checked', async () => { - const onChange = vi.fn(); - render({ onChange }); - await act(() => user.click(screen.queryAllByRole('checkbox')[0])); - expect(onChange).toHaveBeenCalledTimes(1); - expect(onChange).toHaveBeenCalledWith([defaultProps.items[0].name]); - await act(() => user.click(screen.queryAllByRole('checkbox')[1])); - expect(onChange).toHaveBeenCalledTimes(2); - expect(onChange).toHaveBeenCalledWith([ - defaultProps.items[0].name, - defaultProps.items[1].name, - ]); - await act(() => user.click(screen.queryAllByRole('checkbox')[0])); - expect(onChange).toHaveBeenCalledTimes(3); - expect(onChange).toHaveBeenCalledWith([defaultProps.items[1].name]); - }); - - it('Checkboxes should be checked if the "items" prop tells them to be', () => { - render({ - items: [ - { checked: false, label: 'Test 1', name: 'test1' }, - { checked: true, label: 'Test 2', name: 'test2' }, - ], - }); - const checkboxes = screen.queryAllByRole('checkbox'); - expect(checkboxes[0]).not.toBeChecked(); - expect(checkboxes[1]).toBeChecked(); - }); - - it('Checkboxes should update their "checked" state if the component rerenders with another configuration', () => { - const items: LegacyCheckboxGroupItem[] = [ - { label: 'Test 1', name: 'test1' }, - { label: 'Test 2', name: 'test2' }, - ]; - const { rerender } = render({ items }); - items[0] = { checked: true, label: 'Test 1', name: 'test1' }; - items[1] = { checked: false, label: 'Test 2', name: 'test2' }; - rerender(); - - const checkboxes = screen.queryAllByRole('checkbox'); - expect(checkboxes[0]).toBeChecked(); - expect(checkboxes[1]).not.toBeChecked(); - }); - - it('Checkboxes should not be checked by default', () => { - render(); - const checkboxes = screen.queryAllByRole('checkbox'); - checkboxes.forEach((checkbox) => expect(checkbox).not.toBeChecked()); - }); - - it('Checkboxes should not be disabled by default', () => { - render(); - const checkboxes = screen.queryAllByRole('checkbox'); - checkboxes.forEach((checkbox) => expect(checkbox).not.toBeDisabled()); - }); - - it('Should switch "checked" state of a checkbox when the user clicks on it', async () => { - render(); - const checkboxes = screen.queryAllByRole('checkbox'); - await act(() => user.click(checkboxes[0])); - expect(checkboxes[0]).toBeChecked(); - expect(checkboxes[1]).not.toBeChecked(); - await act(() => user.click(checkboxes[1])); - expect(checkboxes[0]).toBeChecked(); - expect(checkboxes[1]).toBeChecked(); - await act(() => user.click(checkboxes[0])); - expect(checkboxes[0]).not.toBeChecked(); - expect(checkboxes[1]).toBeChecked(); - await act(() => user.click(checkboxes[1])); - expect(checkboxes[0]).not.toBeChecked(); - expect(checkboxes[1]).not.toBeChecked(); - }); - - it('All checkboxes should be disabled when the "disabled" prop is true', () => { - render({ disabled: true }); - const checkboxes = screen.queryAllByRole('checkbox'); - checkboxes.forEach((checkbox) => expect(checkbox).toBeDisabled()); - }); - - it('onChange handler should not be called when the "disabled" prop is true', async () => { - const onChange = vi.fn(); - render({ disabled: true, onChange }); - await act(() => user.click(screen.queryAllByRole('checkbox')[0])); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Checkboxes should be rendered with the properties given in the "items" prop', () => { - const description = 'Description', - checkboxId = 'id', - label = 'Label', - name = 'name'; - render({ - items: [{ description, disabled: true, checkboxId, label, name }], - }); - const checkbox = screen.getByRole('checkbox'); - expect(checkbox.getAttribute('name')).toEqual(name); - expect(checkbox.getAttribute('id')).toEqual(checkboxId); - expect(checkbox).toBeDisabled(); - expect(screen.getByText(label)).toBeDefined(); - expect(screen.getByText(description)).toBeDefined(); - }); - - it('Renders all checkboxes with presentation role when the "presentation" property is true', () => { - render({ presentation: true }); - const numOfCheckboxes = defaultProps.items.length; - expect(screen.queryAllByRole('presentation')).toHaveLength(numOfCheckboxes); - expect(screen.queryAllByRole('checkbox')).toHaveLength(0); - }); -}); - -const render = (props: Partial = {}) => { - const allProps = { ...defaultProps, ...props }; - return renderRtl(); -}; diff --git a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx b/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx deleted file mode 100644 index 226fb8a3e8..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import type { ReactNode } from 'react'; -import { useReducer } from 'react'; -import cl from 'clsx'; - -import { LegacyCheckbox } from '../LegacyCheckbox'; -import type { LegacyFieldSetProps } from '../LegacyFieldSet'; -import { LegacyFieldSet } from '../LegacyFieldSet'; -import { - areItemsUnique, - arraysEqual, - objectValuesEqual, -} from '../../../utilities'; -import { usePrevious, useUpdate } from '../../../hooks'; -import type { LegacyCheckboxProps } from '../LegacyCheckbox'; - -import classes from './CheckboxGroup.module.css'; - -export type LegacyCheckboxGroupItem = Pick< - LegacyCheckboxProps, - | 'checked' - | 'description' - | 'disabled' - | 'checkboxId' - | 'label' - | 'helpText' - | 'hideLabel' -> & - Required>; - -export type CheckedNames = string[]; - -export interface LegacyCheckboxGroupProps { - compact?: boolean; - description?: ReactNode; - disabled?: boolean; - error?: ReactNode; - helpText?: ReactNode; - items: LegacyCheckboxGroupItem[]; - legend?: ReactNode; - onChange?: (names: CheckedNames) => void; - presentation?: boolean; - variant?: 'vertical' | 'horizontal'; - fieldSetProps?: Partial; -} - -type ReducerAction = - | { type: 'check' | 'uncheck'; name: string } - | { type: 'reset'; state: CheckedNames }; - -const reducer = (state: CheckedNames, action: ReducerAction) => { - switch (action.type) { - case 'check': - return state.concat([action.name]); - case 'uncheck': - return state.filter((name) => name !== action.name); - case 'reset': - return action.state; - } -}; -const checkedItems = (items: LegacyCheckboxGroupItem[]) => - items.filter(({ checked }) => checked).map(({ name }) => name); - -const LegacyCheckboxGroup = ({ - compact, - description, - disabled, - error, - helpText, - items, - legend, - onChange, - presentation, - variant = 'vertical', - fieldSetProps, -}: LegacyCheckboxGroupProps) => { - if (!areItemsUnique(items.map((item) => item.name))) { - throw Error('Each name in the checkbox group must be unique.'); - } - - const [checkedNames, dispatch] = useReducer(reducer, checkedItems(items)); - - const prevItems = usePrevious([...items]); - useUpdate(() => { - if ( - items.length !== prevItems?.length || - items.some((item, index) => !objectValuesEqual(item, prevItems[index])) - ) - dispatch({ type: 'reset', state: checkedItems(items) }); - }); - - const prevCheckedNames = usePrevious(checkedNames); - - useUpdate(() => { - onChange && - !disabled && - !arraysEqual(prevCheckedNames, checkedNames) && - onChange(checkedNames); - }, [checkedNames, onChange, disabled]); - - return ( - - {items.map((item) => ( - { - dispatch({ - type: event.target.checked ? 'check' : 'uncheck', - name: item.name, - }); - }} - presentation={presentation} - /> - ))} - - ); -}; - -LegacyCheckboxGroup.displayName = 'LegacyCheckboxGroup'; - -/** - * - * @note - * Replaced by new {@link https://storybook.designsystemet.no/?path=/docs/komponenter-checkbox-group--docs Checkbox.Group} component. - */ -export { LegacyCheckboxGroup }; diff --git a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/index.ts b/packages/react-old/src/components/legacy/LegacyCheckboxGroup/index.ts deleted file mode 100644 index 7c00f7bf07..0000000000 --- a/packages/react-old/src/components/legacy/LegacyCheckboxGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CheckboxGroup'; diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.mdx b/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.mdx deleted file mode 100644 index bb54678a87..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.mdx +++ /dev/null @@ -1,52 +0,0 @@ -import { Meta, Canvas, Controls, Primary } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import * as FieldSetStories from './FieldSet.stories'; - - - -# LegacyFieldSet - - - -`LegacyFieldSet` brukes til å gruppere innhold i et skjema. - -## Egenskaper - -Det er mulig å legge til en tittel (`legend`) og en beskrivelse (`description`). -Man kan legge til en hjelpetekst som vises ved aktivering av hjelpetekst-knappen -ved å bruke `helpText`-attributten. Man kan også vise en feilmelding relatert til -gruppen ved å bruke `error`-attributten. Setter man `disabled` til `true`, vil alle -feltene i gruppen bli deaktivert. - - - - -## Bruk - -```tsx -import React from 'react'; -import '@altinn/figma-design-tokens/dist/tokens.css'; // Importeres kun én gang i din applikasjon -import { LegacyFieldSet, TextField } from '@digdir/design-system-react'; - -export const Component = () => ( - - - - -); -``` - -## Eksempel - - diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.module.css b/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.module.css deleted file mode 100644 index 93e120e245..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.module.css +++ /dev/null @@ -1,71 +0,0 @@ -.fieldSet { - --color: var(--component-checkbox-color-text-default); - --content-margin_top: var(--component-fieldset-space-gap-y-small); - --description-color: var(--component-field_description-color-text-default); - --description-margin_top: var(--component-field_description-space-top-small); - --error_message-margin_top: var(--component-fieldset-space-gap-y-small); - --help_text-gap: var(--component-field_description-space-top-small); - --font_size: var(--component-checkbox-font_size-sm); - - color: var(--color); - border: 0; - font-size: var(--font_size); - line-height: var(--typography-default-line-height); - margin: 0; - padding: 0; -} - -.small { - --content-margin_top: var(--component-fieldset-space-gap-y-small); - --description-margin_top: var(--component-field_description-space-top-small); - --error_message-margin_top: var(--component-fieldset-space-gap-y-small); - --help_text-gap: var(--component-field_description-space-top-small); - --font_size: var(--component-checkbox-font_size-sm); -} - -.xsmall { - --content-margin_top: var(--component-fieldset-space-gap-y-xsmall); - --description-margin_top: var(--component-field_description-space-top-xsmall); - --error_message-margin_top: var(--component-fieldset-space-gap-y-xsmall); - --help_text-gap: var(--component-field_description-space-top-xsmall); - --font_size: var(--component-checkbox-font_size-xs); -} - -.fieldSet:disabled { - opacity: var(--fds-opacity-disabled); -} - -.fieldSet:disabled * { - opacity: 1; -} - -.legendAndHelpText { - display: flex; - gap: var(--help_text-gap); - padding: 0; -} - -.legend { - padding: 0; -} - -.legendContent { - font-weight: bold; -} - -.description { - color: var(--description-color); - margin: 0; -} - -.legend + .description { - margin-top: var(--description-margin_top); -} - -.content:not(:first-child) { - margin-top: var(--content-margin_top); -} - -.errorMessage { - margin-top: var(--error_message-margin_top); -} diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx b/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx deleted file mode 100644 index ba155d230f..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/react'; - -import { LegacyTextField } from '../LegacyTextField'; - -import { LegacyFieldSet } from './FieldSet'; - -export default { - title: 'Avviklet/LegacyFieldSet', - component: LegacyFieldSet, -} as Meta; - -export const Eksempel: StoryFn = (args) => ( - -
- - -
- -); - -Eksempel.args = { - legend: 'Personlig informasjon', - description: 'Oppgi navn og fødselsdato.', - size: 'small', -}; diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.test.tsx b/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.test.tsx deleted file mode 100644 index 95ffb46229..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.test.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { createRef } from 'react'; -import type { RefObject } from 'react'; -import { render as renderRtl, screen } from '@testing-library/react'; - -import type { LegacyFieldSetProps } from './FieldSet'; -import { LegacyFieldSet } from './FieldSet'; - -const defaultProps: LegacyFieldSetProps = { - children: 'Some content.', -}; - -describe('FieldSet', () => { - it('Should display children', () => { - render(); - expect(screen.getByText(defaultProps.children as string)).toBeDefined(); - }); - - it('Does not display legend by default', () => { - const { container } = render(); - expect(container.querySelector('legend')).toBeFalsy(); - }); - - it('Displays legend if given', () => { - const legend = 'Lorem ipsum'; - const { container } = render({ legend }); - expect(container.querySelector('legend')).toHaveTextContent(legend); - }); - - it('Does not display description by default', () => { - const { container } = render(); - expect(container.querySelector('.description')).toBeFalsy(); - }); - - it('Displays description if given', () => { - const description = 'Lorem ipsum dolor sit amet.'; - const { container } = render({ description }); - expect(container.querySelector('.description')).toHaveTextContent( - description, - ); - }); - - it('Does not display error message by default', () => { - render(); - expect(screen.queryAllByRole('alertdialog')).toHaveLength(0); - }); - - it('Displays error message if given', () => { - const error = 'Something is wrong.'; - render({ error }); - expect(screen.getByRole('alert')).toHaveTextContent(error); - }); - - it('Has class "small" by default', () => { - render(); - expect(screen.getByRole('group')).toHaveClass('small'); - expect(screen.getByRole('group')).not.toHaveClass('xsmall'); - }); - - it('Has class "small" if the "size" property is set to "small"', () => { - render({ size: 'small' }); - expect(screen.getByRole('group')).toHaveClass('small'); - expect(screen.getByRole('group')).not.toHaveClass('xsmall'); - }); - - it('Has class "xsmall" if the "size" property is set to "xsmall"', () => { - render({ size: 'xsmall' }); - expect(screen.getByRole('group')).toHaveClass('xsmall'); - expect(screen.getByRole('group')).not.toHaveClass('small'); - }); - - it('Is enabled by default', () => { - render(); - expect(screen.getByRole('group')).toBeEnabled(); - }); - - it('Is disabled if the "disabled" property is true', () => { - render({ disabled: true }); - expect(screen.getByRole('group')).toBeDisabled(); - }); - - it('Is enabled if the "disabled" property is false', () => { - render({ disabled: false }); - expect(screen.getByRole('group')).toBeEnabled(); - }); - - it('Sets class given by the "contentClassName" property on the content div', () => { - const contentClassName = 'some-class'; - const { container } = render({ contentClassName }); - expect(container.querySelector(`.${contentClassName}`)).toBeInTheDocument(); - }); - - it('Displays legend and description if they are React nodes', () => { - const legendText = 'Legend'; - const descriptionText = 'Description'; - render({ - legend: {legendText}, - description: {descriptionText}, - }); - expect(screen.getByText(legendText)).toBeInTheDocument(); - expect(screen.getByText(descriptionText)).toBeInTheDocument(); - }); - - it('Sets the ref on the fieldset element if given', () => { - const ref = createRef(); - render({}, ref); - expect(ref.current).toBeInstanceOf(HTMLFieldSetElement); - }); -}); - -const render = ( - props: Partial = {}, - ref?: RefObject, -) => { - const allProps = { ...defaultProps, ...props }; - return renderRtl( - - {allProps.children} - , - ); -}; diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.tsx b/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.tsx deleted file mode 100644 index f6bd5dc289..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/FieldSet.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import type { FieldsetHTMLAttributes, ForwardedRef, ReactNode } from 'react'; -import { forwardRef } from 'react'; -import cl from 'clsx'; -import { - HelpText, - ErrorMessage, - type HelpTextProps, -} from '@digdir/designsystemet-react'; - -import classes from './FieldSet.module.css'; - -export type LegacyFieldSetProps = { - /** Class name that is applied to the content within the field set. */ - contentClassName?: string; - - /** A description of the field set. This will appear below the legend. */ - description?: ReactNode; - - /** Set to `true` to disable all input fields within the field set. */ - disabled?: boolean; - - /** If set, this will diplay an error message at the bottom of the component. */ - error?: ReactNode; - - /** - * If set, a help text button will appear next to the legend. - * The provided message will appear when the user clicks on the button. - */ - helpText?: ReactNode; - - /** The title of the help text button. */ - helpTextTitle?: string; - - /** The legend of the field set. */ - legend?: ReactNode; - - /** The size of the field set. */ - size?: 'xsmall' | 'small'; -} & FieldsetHTMLAttributes; - -const SIZE_MAP: { - [key in NonNullable]: HelpTextProps['size']; -} = { - xsmall: 'small', - small: 'medium', -}; - -/** - * - * @note - * Replaced by new {@link https://storybook.designsystemet.no/?path=/docs/komponenter-fieldset--docs Fieldset} component. - */ -const LegacyFieldSet = forwardRef( - ( - { - children, - className, - contentClassName, - description, - disabled = false, - error, - helpText, - helpTextTitle = 'Vis hjelpetekst', - legend, - size = 'small', - ...rest - }, - ref: ForwardedRef, - ) => ( -
- {legend && ( - - - {legend} - {helpText && ( - - {helpText} - - )} - - - )} - {description &&

{description}

} -
{children}
- {error && ( -
- {error} -
- )} -
- ), -); - -LegacyFieldSet.displayName = 'LegacyFieldSet'; - -export { LegacyFieldSet }; diff --git a/packages/react-old/src/components/legacy/LegacyFieldSet/index.ts b/packages/react-old/src/components/legacy/LegacyFieldSet/index.ts deleted file mode 100644 index 401b694ef6..0000000000 --- a/packages/react-old/src/components/legacy/LegacyFieldSet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './FieldSet'; diff --git a/packages/react-old/src/components/legacy/LegacyPopover/Popover.module.css b/packages/react-old/src/components/legacy/LegacyPopover/Popover.module.css deleted file mode 100644 index a91c75de9f..0000000000 --- a/packages/react-old/src/components/legacy/LegacyPopover/Popover.module.css +++ /dev/null @@ -1,79 +0,0 @@ -.popover { - width: max-content; - z-index: 2; - padding: 12px; - max-width: calc(100vw - 20px); - border: 1px solid gray; - border-radius: 3px; - box-shadow: 0 3px 6px 0 #0003; -} - -.popover:focus-visible { - outline: var(--semantic-tab_focus-outline-color) solid var(--semantic-tab_focus-outline-width); - outline-offset: var(--semantic-tab_focus-outline-offset); -} - -.popover:focus:not(:focus-visible) { - outline: none; -} - -.popover.default { - background-color: #fff; - border-color: #68707c; -} - -.popover.info { - background-color: #e6eff8; - border-color: #004c8f; -} - -.popover.warning { - background-color: #fffbe6; - border-color: #cc7005; -} - -.popover.danger { - background-color: #f9d5db; - border-color: #b3253a; -} - -.arrow { - position: absolute; - box-sizing: content-box; - z-index: -1; - transform: rotate(45deg); - background-color: inherit; - border: 1px solid; - - /* Set border color separately in order to make inheritance work. */ - border-color: inherit; - width: 12px; - height: 12px; -} - -.popover[data-placement^='top'] > .arrow { - box-shadow: 3px 3px 6px 0 #0003; - clip-path: inset(0 -10px -10px 0); - border-left-color: transparent; - border-top-color: transparent; -} - -.popover[data-placement^='bottom'] > .arrow { - clip-path: inset(-10px 0 0 -10px); - border-bottom-color: transparent; - border-right-color: transparent; -} - -.popover[data-placement^='left'] > .arrow { - box-shadow: 1px 3px 6px 0 #0003; - clip-path: inset(-10px -10px 0 0); - border-left-color: transparent; - border-bottom-color: transparent; -} - -.popover[data-placement^='right'] > .arrow { - box-shadow: -1px 3px 6px 0 #0003; - clip-path: inset(0 0 -10px -10px); - border-right-color: transparent; - border-top-color: transparent; -} diff --git a/packages/react-old/src/components/legacy/LegacyPopover/Popover.stories.mdx b/packages/react-old/src/components/legacy/LegacyPopover/Popover.stories.mdx deleted file mode 100644 index f85ea3c968..0000000000 --- a/packages/react-old/src/components/legacy/LegacyPopover/Popover.stories.mdx +++ /dev/null @@ -1,154 +0,0 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; - -import { Button } from '@digdir/designsystemet-react'; -import { Information } from '@doc-components'; - -import { LegacyPopover } from './index'; - - - -export const defaultArgs = { - trigger: , -}; - -export const Template = (args) => { - return ( - - Lorem ipsum dolor sit amet... - - ); -}; - -export const ComplexTemplate = (args) => { - return ( - -
- Hallo! -
    -
  • Coffee
    • -
  • Tea
    • -
  • Milk
    • -
- -
- - ); -}; - -# LegacyPopover - - - -LegacyPopover er et felt som plasseres over annet innhold og kan vises og skjules ved hjelp av å aktivere en gitt `trigger`. - -## Varianter - -### Default - - - ( -
- -
- ), - ]} - parameters={{ - layout: 'centered', - }} - args={{ - placement: 'top', - variant: 'default', - }} - > - {Template.bind({})} - - - -### Mer komplekst innhold - - - ( -
- -
- ), - ]} - parameters={{ - layout: 'centered', - }} - args={{ - placement: 'right', - variant: 'warning', - }} - > - {ComplexTemplate.bind({})} - - - -## Props - - diff --git a/packages/react-old/src/components/legacy/LegacyPopover/Popover.test.tsx b/packages/react-old/src/components/legacy/LegacyPopover/Popover.test.tsx deleted file mode 100644 index 1fa9ca7466..0000000000 --- a/packages/react-old/src/components/legacy/LegacyPopover/Popover.test.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import userEvent from '@testing-library/user-event'; -import { render as renderRtl, screen } from '@testing-library/react'; -import { act } from 'react'; - -import type { LegacyPopoverProps } from './Popover'; -import { popoverVariants, LegacyPopover } from './Popover'; - -const render = (props: Partial = {}) => { - const allProps: LegacyPopoverProps = { - children: ( -
- - Popover text -
- ), - trigger: , - ...props, - }; - renderRtl(); -}; - -const user = userEvent.setup(); - -describe('Popover', () => { - describe('trigger uncontrolled', () => { - it('should render trigger', () => { - render(); - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - - expect(popoverTrigger).toBeInTheDocument(); - }); - - it('should open popover on trigger click when closed', async () => { - render(); - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - await act(async () => user.click(popoverTrigger)); - expect(screen.queryByText('Popover text')).toBeInTheDocument(); - }); - - it('should close popover on trigger click when open', async () => { - render({ initialOpen: true }); - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - - expect(screen.queryByText('Popover text')).toBeInTheDocument(); - await act(async () => user.click(popoverTrigger)); - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - }); - - it('should open popover on SPACE pressed when closed', async () => { - render(); - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - popoverTrigger.focus(); - await act(async () => { - await user.keyboard('[Space]'); - }); - expect(screen.queryByText('Popover text')).toBeInTheDocument(); - }); - - it('should close popover on ESC pressed click when open', async () => { - render({ initialOpen: true }); - - expect(screen.queryByText('Popover text')).toBeInTheDocument(); - await act(async () => { - await user.keyboard('[Escape]'); - }); - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - }); - }); - - it('should show popover content when initialOpen=true', () => { - render({ initialOpen: true }); - - expect(screen.queryByText('Popover text')).toBeInTheDocument(); - }); - - it('should not show popover content when initialOpen=false', () => { - render({ initialOpen: false }); - - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - }); - - it('should retain focus on trigger when popover opens', async () => { - render(); - - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - popoverTrigger.focus(); - await act(async () => { - await user.keyboard('[Space]'); - }); - expect(popoverTrigger).toHaveFocus(); - }); - - it('should focus focasable content on tab', async () => { - render(); - - const popoverTrigger = screen.getByRole('button', { name: 'Open' }); - expect(screen.queryByText('Popover text')).not.toBeInTheDocument(); - popoverTrigger.focus(); - await act(async () => { - await user.keyboard('[Space]'); - }); - const contentButton = screen.getByRole('button', { name: 'My button' }); - await act(async () => { - await user.keyboard('[Tab]'); - }); - expect(contentButton).toHaveFocus(); - }); - - test.each(popoverVariants)( - 'should render popover with correct variant when variant is %s', - (variant) => { - render({ variant: variant, initialOpen: true }); - const otherColors = popoverVariants.filter((v) => v !== variant); - - const popoverContent = screen.getByRole('dialog'); - expect(popoverContent).toBeInTheDocument(); - - expect(popoverContent.classList).toContain(variant); - otherColors.forEach((v) => { - expect(popoverContent.classList).not.toContain(v); - }); - }, - ); -}); diff --git a/packages/react-old/src/components/legacy/LegacyPopover/Popover.tsx b/packages/react-old/src/components/legacy/LegacyPopover/Popover.tsx deleted file mode 100644 index c78d2ef4b6..0000000000 --- a/packages/react-old/src/components/legacy/LegacyPopover/Popover.tsx +++ /dev/null @@ -1,257 +0,0 @@ -import type { HTMLAttributes } from 'react'; -import type React from 'react'; -import { - useRef, - useState, - useMemo, - createContext, - useContext, - forwardRef, - isValidElement, - cloneElement, -} from 'react'; -import type { Placement } from '@floating-ui/react'; -import { - arrow as flArrow, - useFloating, - autoUpdate, - offset as flOffset, - flip, - shift, - useClick, - useDismiss, - useRole, - useInteractions, - useMergeRefs, -} from '@floating-ui/react'; -import cl from 'clsx'; - -import classes from './Popover.module.css'; - -export const popoverVariants = [ - 'default', - 'info', - 'warning', - 'danger', -] as const; - -type PopoverVariant_ = (typeof popoverVariants)[number]; - -interface IPopoverOptions extends HTMLAttributes { - variant?: PopoverVariant_; - arrow?: boolean; - offset?: number; - initialOpen?: boolean; - placement?: Placement; - open?: boolean; - onOpenChange?: (open: boolean) => void; -} - -interface IPopoverRequiredProps { - children: React.ReactNode; - trigger: React.ReactNode; -} - -export type LegacyPopoverProps = IPopoverOptions & IPopoverRequiredProps; - -type IPopoverContext = IPopoverOptions & - Required> & - ReturnType & - ReturnType> & { - arrowRef: React.RefObject; - setOpen: (open: boolean) => void; - }; - -export function usePopover({ - variant = 'default', - arrow, - initialOpen, - placement, - offset: offset, - open: controlledOpen, - onOpenChange: setControlledOpen, - ...restOptions -}: IPopoverOptions): IPopoverContext { - const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen); - - const open = controlledOpen ?? uncontrolledOpen; - const setOpen = setControlledOpen ?? setUncontrolledOpen; - - const arrowRef = useRef(null); - - const data = useFloating({ - placement, - open, - onOpenChange: setOpen, - whileElementsMounted: autoUpdate, - middleware: [ - flOffset(offset ?? (arrow ? 12 : 4)), - flip({ padding: 5, fallbackPlacements: ['bottom', 'top'] }), - shift({ padding: 5 }), - flArrow({ element: arrowRef, padding: 8 }), - ], - }); - - const context = data.context; - - const click = useClick(context, { - enabled: controlledOpen == null, - }); - const dismiss = useDismiss(context, { - referencePress: false, - }); - const role = useRole(context); - - const interactions = useInteractions([click, dismiss, role]); - - return useMemo( - () => - ({ - open, - setOpen, - ...interactions, - ...data, - ...restOptions, - arrow, - arrowRef, - variant, - } satisfies IPopoverContext), - [open, setOpen, interactions, data, restOptions, arrow, arrowRef, variant], - ); -} - -type NullablePopoverContext = IPopoverContext | null; - -const PopoverContext = createContext(null); - -export const usePopoverContext = (): IPopoverContext => { - const context = useContext(PopoverContext); - - if (context == null) { - throw new Error('Popover components must be wrapped in '); - } - - return context; -}; - -function LegacyPopover({ - children, - trigger, - arrow = true, - initialOpen = false, - ...restOptions -}: LegacyPopoverProps) { - const popover = usePopover({ - arrow, - initialOpen, - ...restOptions, - }); - - return ( - - {trigger} - - {children} - {popover.arrow && } - - - ); -} - -LegacyPopover.displayName = 'LegacyPopover'; - -export { LegacyPopover }; - -interface PopoverTriggerProps { - children: React.ReactNode; -} - -const PopoverTrigger = forwardRef< - HTMLElement, - React.HTMLProps & PopoverTriggerProps ->(function PopoverTrigger({ children, ...props }, propRef) { - const context = usePopoverContext(); - - const child = isValidElement(children) - ? (children as React.ReactElement & React.RefAttributes) - : null; - const ref = useMergeRefs([context.refs.setReference, propRef]); - - if (child) { - const childProps = { - ref, - ...props, - ...(child.props as Record), - ...context.getReferenceProps(), - 'data-state': context.open ? 'open' : 'closed', - 'aria-expanded': context.open, - }; - - return cloneElement(child, childProps); - } - - return null; -}); - -const PopoverContent = forwardRef< - HTMLDivElement, - React.HTMLProps ->(function PopoverContent(props, propRef) { - const context = usePopoverContext(); - const ref = useMergeRefs([context.refs.setFloating, propRef]); - - return context.open ? ( -
- {props.children} -
- ) : null; -}); - -const PopoverArrow = forwardRef< - HTMLDivElement, - React.HTMLProps ->(function PopoverContent(props, propRef) { - const context = usePopoverContext(); - const ref = useMergeRefs([context.arrowRef, propRef]); - - const arrowX = context.middlewareData.arrow?.x; - const arrowY = context.middlewareData.arrow?.y; - - // Get the placement of the popover arrow independent of alignment, which is opposite of popover content placement. - // Used to align the arrow to the edge of the content. - const staticSide: string | undefined = { - top: 'bottom', - right: 'left', - bottom: 'top', - left: 'right', - }[context.placement.split('-')[0]]; - - return ( -
- ); -}); diff --git a/packages/react-old/src/components/legacy/LegacyPopover/index.ts b/packages/react-old/src/components/legacy/LegacyPopover/index.ts deleted file mode 100644 index f3ab889de9..0000000000 --- a/packages/react-old/src/components/legacy/LegacyPopover/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type { LegacyPopoverProps } from './Popover'; -export { LegacyPopover } from './Popover'; diff --git a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.module.css b/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.module.css deleted file mode 100644 index e59fa3c3f1..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.module.css +++ /dev/null @@ -1,63 +0,0 @@ -.radio { - /* Internal variables */ - --radio-background_color: var(--component-checkbox-color-background-default); - --radio-border_color: var(--component-checkbox-color-border-default); - --radio-border_width: var(--component-checkbox-border_width-small); - --radio-checkmark-color: var(--colors-blue-700); - --radio-checkmark-display: none; - --radio-size: var(--component-checkbox-size-width-small); - - /* Variables used by CheckboxRadioTemplate */ - --input_box-border_radius: calc(var(--radio-size) / 2); - --input_box-size: var(--radio-size); -} - -.radio.small { - --radio-size: var(--component-checkbox-size-width-small); -} - -.radio.xsmall { - --radio-size: var(--component-checkbox-size-width-xsmall); -} - -.radio.error { - --radio-background_color: var(--component-checkbox-color-background-error); - --radio-border_color: var(--component-checkbox-color-border-error); -} - -.radio.checked { - --radio-checkmark-display: inline-block; -} - -.radio.checked:not(.error) { - --radio-border_color: var(--component-checkbox-color-border-checked); -} - -.radio:not(.disabled, .checked):hover { - --radio-background_color: var(--component-checkbox-color-background-hover); -} - -.radio:not(.disabled, .error, .checked):hover { - --radio-border_color: var(--component-checkbox-color-border-hover); -} - -.visibleButton { - background-color: var(--radio-background_color); - border-radius: 50%; - outline-color: var(--radio-border_color); - outline-style: solid; - outline-offset: calc(-1 * var(--radio-border_width)); - outline-width: var(--radio-border_width); - box-sizing: border-box; - display: inline-block; - height: var(--radio-size); - width: var(--radio-size); -} - -.checkmark { - box-shadow: 0 0 0 calc(2 * var(--radio-border_width)) var(--radio-background_color) inset, 0 0 0 var(--radio-size) var(--radio-checkmark-color) inset; - border-radius: 50%; - display: var(--radio-checkmark-display); - height: 100%; - width: 100%; -} diff --git a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx b/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx deleted file mode 100644 index 6e243eeecf..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx +++ /dev/null @@ -1,238 +0,0 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import { LegacyRadioButton } from './index'; - - - -export const defaultArgs = { - checked: false, - disabled: false, - onChange: () => {}, -}; -export const Template = (args = {}) => ( - -); - -# LegacyRadioButton - - - -`LegacyRadioButton` er en knapp som skal brukes i kombinasjon med andre radioknapper for å velge mellom flere alternativer. -Vi anbefaler å bruke `RadioGroup` hvis man har behov for radioknapper, -men `LegacyRadioButton` kan brukes hvis `RadioGruoup` ikke oppfyller kriteriene til brukertilfellet som skal løses. -Hvis det er tilfellet, kan man også vurdere å gi et bidrag til designsystemet :-) - -## Eksempler - -Radioknappene kan ha flere forskjellige statuser: - - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - -I avkrysset tilstand - - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - -Man kan også velge å legge til en beskrivelse: - - - - {Template.bind({})} - - - -Radioknappen blir midtjustert med første linje selv om teksten går over flere linjer: - - - - {Template.bind({})} - - - -I noen tilfeller kan det være nødvendig å vise en radioknapp uten tekst, for eksempel i en tabell. -Man må da sørge for at radioknappen likevel har en tekst som er tilgjengelig for skjermlesere. -Dette kan man gjøre ved å sette `label`-attributten på vanlig måte og sette `hideLabel` til `true`. - - - - {Template.bind({})} - - - -## Egenskaper - -`LegacyRadioButton` er en kontrollert komponent; det vil si at det er opp til foreldrenoden å holde styr på om knappen er trykket inn eller ikke. -Dette gjøres ved å sette `checked`-attributten til `true` eller `false` idet `onChange`-funksjonen blir kalt. - - diff --git a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.test.tsx b/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.test.tsx deleted file mode 100644 index 7614266b59..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.test.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import assert from 'assert'; - -import { render as renderRtl, screen } from '@testing-library/react'; -import { act } from 'react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import { LegacyRadioButton } from '.'; -import type { LegacyRadioButtonProps } from '.'; - -const user = userEvent.setup(); - -// Test data -const onChange = vi.fn(); -const name = 'radio-ga-ga'; -const value = 'radio-goo-goo'; -const defaultProps: LegacyRadioButtonProps = { - onChange, - name, - value, -}; - -describe('RadioButton', () => { - afterEach(() => { - vi.restoreAllMocks(); - }); - - it('Renders a radio button', () => { - render(); - expect(screen.getByRole('radio')).toBeInTheDocument(); - }); - - it('Is not checked by default', () => { - const wrapper = renderAndGetWrapper(); - expect(screen.getByRole('radio')).not.toBeChecked(); - expect(wrapper).not.toHaveClass('radio--checked'); - }); - - it('Is checked if the "checked" prop is true', () => { - const wrapper = renderAndGetWrapper({ checked: true }); - expect(screen.getByRole('radio')).toBeChecked(); - expect(wrapper).toHaveClass('checked'); - }); - - it('Is not checked if the "checked" prop is false', () => { - const wrapper = renderAndGetWrapper({ checked: false }); - expect(screen.getByRole('radio')).not.toBeChecked(); - expect(wrapper).not.toHaveClass('checked'); - }); - - it('Calls onChange when user clicks', async () => { - const wrapper = renderAndGetWrapper(); - await act(() => user.click(wrapper)); - expect(onChange).toHaveBeenCalledTimes(1); - }); - - it('Does not call onChange when user clicks and the radio button is disabled', async () => { - const wrapper = renderAndGetWrapper({ disabled: true }); - await act(() => user.click(wrapper)); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Displays label text', () => { - const label = 'All we hear is radio ga ga'; - render({ label }); - expect(screen.getByText(label)).toBeDefined(); - }); - - it('Does not display label text, but still makes it accessible, when hideLabel is true', () => { - const label = 'All we hear is radio ga ga'; - render({ hideLabel: true, label }); - expect(screen.getByText(label).style.display).toEqual('none'); - expect(screen.getByLabelText(label)).toBeTruthy(); - }); - - it('Renders radio button with given radioId', () => { - const radioId = 'radio-whats-new'; - render({ radioId }); - expect(screen.getByRole('radio').id).toEqual(radioId); - }); - - it('Renders radio button with given name', () => { - render(); - expect(screen.getByRole('radio').getAttribute('name')).toEqual(name); - }); - - it('Displays description if given', () => { - const description = 'Radio, someone still loves you'; - render({ description }); - expect(screen.getByText(description)).toBeDefined(); - }); - - it('Renders with correct classes by default', () => { - const wrapper = renderAndGetWrapper(); - expect(wrapper).toHaveClass('small'); - expect(wrapper).not.toHaveClass('error'); - expect(wrapper).not.toHaveClass('disabled'); - }); - - it('Renders with "xsmall" size class by if size is set to "Xsmall"', () => { - const wrapper = renderAndGetWrapper({ size: 'xsmall' }); - expect(wrapper).toHaveClass('xsmall'); - }); - - it('Renders with "small" size class by if size is set to "Small"', () => { - const wrapper = renderAndGetWrapper({ size: 'small' }); - expect(wrapper).toHaveClass('small'); - }); - - it('Renders with "error" class if the "error" property is true', () => { - const wrapper = renderAndGetWrapper({ error: true }); - expect(wrapper).toHaveClass('error'); - }); - - it('Renders withot "error" class if the "error" property is false', () => { - const wrapper = renderAndGetWrapper({ error: false }); - expect(wrapper).not.toHaveClass('error'); - }); - - it('Renders with "disabled" class if the "disabled" property is true', () => { - const wrapper = renderAndGetWrapper({ disabled: true }); - expect(wrapper).toHaveClass('disabled'); - }); - - it('Renders without "disabled" class if the "disabled" property is false', () => { - const wrapper = renderAndGetWrapper({ disabled: false }); - expect(wrapper).not.toHaveClass('disabled'); - }); - - it.each([false, undefined])( - 'Does not have presentation role when the "presentation" property is %s', - (presentation) => { - render({ presentation }); - expect(screen.queryByRole('presentation')).toBeFalsy(); - }, - ); - - it('Has presentation role when the "presentation" property is true', () => { - render({ presentation: true }); - expect(screen.getByRole('presentation')).toBeInTheDocument(); - expect(screen.queryByRole('radio')).toBeFalsy(); - }); - - it('Displays label and description when they are React nodes', () => { - const labelText = 'Label'; - const descriptionText = 'Description'; - render({ - label: {labelText}, - description: {descriptionText}, - }); - expect(screen.getByText(labelText)).toBeInTheDocument(); - expect(screen.getByText(descriptionText)).toBeInTheDocument(); - }); - - it('Has clickable label text by default if label is set', async () => { - const label = 'Label'; - render({ label }); - await act(() => user.click(screen.getByText(label))); - expect(onChange).toHaveBeenCalled(); - }); - - it('Does not have clickable label text if the "presentation" property is true and the label is a React node', async () => { - const labelText = 'Label'; - render({ - label: {labelText}, - presentation: true, - }); - await act(() => user.click(screen.getByText(labelText))); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Does not have clickable label text if the "presentation" property is true and the description is a React node', async () => { - const descriptionText = 'Description'; - render({ - label: {descriptionText}, - presentation: true, - }); - await act(() => user.click(screen.getByText(descriptionText))); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Has clickable radio button even if the "presentation" property is true and the label is a React node', async () => { - const name = 'Label'; - render({ - label: {name}, - presentation: true, - }); - await act(() => user.click(screen.getByRole('presentation', { name }))); - expect(onChange).toHaveBeenCalled(); - }); -}); - -const render = (props: Partial = {}) => { - const allProps = { ...defaultProps, ...props }; - return renderRtl(); -}; - -const renderAndGetWrapper = ( - props: Partial = {}, -): Element => { - const { container } = render(props); - const wrapper = container.querySelector('.radio'); - assert(wrapper !== null); - return wrapper; -}; diff --git a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.tsx b/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.tsx deleted file mode 100644 index cded934be9..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioButton/RadioButton.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import type { ChangeEventHandler, ReactNode } from 'react'; -import { forwardRef } from 'react'; -import cl from 'clsx'; - -import { CheckboxRadioTemplate } from '../_CheckboxRadioTemplate'; - -import classes from './RadioButton.module.css'; - -export interface LegacyRadioButtonProps { - checked?: boolean; - className?: string; - description?: ReactNode; - disabled?: boolean; - error?: boolean; - helpText?: ReactNode; - hideLabel?: boolean; - label?: ReactNode; - name: string; - onChange: ChangeEventHandler; - presentation?: boolean; - radioId?: string; - size?: 'small' | 'xsmall'; - value: string; -} - -/** - * - * @note - * Replaced by new {@link https://storybook.designsystemet.no/?path=/docs/komponenter-radio--docs Radio} component. - */ -const LegacyRadioButton = forwardRef( - ( - { - checked, - description, - disabled, - error, - helpText, - hideLabel, - label, - name, - onChange, - presentation, - radioId, - size = 'small', - value, - }, - ref, - ) => ( - - - - - - ), -); - -LegacyRadioButton.displayName = 'LegacyRadioButton'; - -export { LegacyRadioButton }; diff --git a/packages/react-old/src/components/legacy/LegacyRadioButton/index.ts b/packages/react-old/src/components/legacy/LegacyRadioButton/index.ts deleted file mode 100644 index 35533913ec..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './RadioButton'; diff --git a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.module.css b/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.module.css deleted file mode 100644 index f6fca85063..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.radioGroup { - column-gap: var(--gap-x); - display: flex; - flex-wrap: wrap; - row-gap: var(--gap-y); -} - -.radioGroup.xsmall { - --gap-x: var(--component-checkbox-group-space-gap-x-xsmall); - --gap-y: var(--component-checkbox-group-space-gap-y-xsmall); -} - -.radioGroup.small { - --gap-x: var(--component-checkbox-group-space-gap-x-small); - --gap-y: var(--component-checkbox-group-space-gap-y-small); -} - -.radioGroup.vertical { - flex-direction: column; -} - -.radioGroup.horizontal { - flex-direction: row; -} diff --git a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx b/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx deleted file mode 100644 index 7357e520a5..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx +++ /dev/null @@ -1,190 +0,0 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import { LegacyRadioGroup } from './index'; - - - -export const defaultArgs = { - legend: 'Hvilken iskremsmak er best?', - description: 'Velg din favorittsmak blant alternativene.', - items: [ - { label: 'Vanilje', value: 'vanilje' }, - { label: 'Jordbær', value: 'jordbær' }, - { label: 'Sjokolade', value: 'sjokolade' }, - { label: 'Jeg spiser ikke iskrem', value: 'spiser-ikke-is' }, - ], - name: 'favorittiskrem', -}; -export const Template = (args = {}) => ( - -); - -# LegacyRadioGroup - - - -`LegacyRadioGroup` er en gruppe med radioknapper som gir brukeren mulighet til å velge ett av flere alternativer. -Den oppfører seg på samme måte som kanalknapper på en radio, hvorav navnet. -Kun én knapp kan være trykket inn av gangen. - -## Eksempler - -### Vertikal visning - - - - {Template.bind({})} - - - -### Horisontal visning - - - - {Template.bind({})} - - - -### Kompakt visning - - - - {Template.bind({})} - - - -### Med feilmelding - - - - {Template.bind({})} - - - -### Med hjelpetekst - - - - {Template.bind({})} - - - -### Deaktivert - - - - {Template.bind({})} - - - -## Egenskaper - - - -## Tilgjengelighet - -### Mus - -Radioknappene kan trykkes inn ved å klikke på dem med musen. - -### Tastatur - -Komponenten kan nås ved bruk av tabulatortasten, og man kan velge knapp ved bruk av piltastene. -Man kan også bruke mellomromstasten til å trykke inn den fokuserte radioknappen dersom den ikke allerede har fokus. diff --git a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.test.tsx b/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.test.tsx deleted file mode 100644 index 232e61f9f7..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.test.tsx +++ /dev/null @@ -1,243 +0,0 @@ -import { render as renderRtl, screen } from '@testing-library/react'; -import { act } from 'react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import type { LegacyRadioGroupProps } from './RadioGroup'; -import { LegacyRadioGroup } from './RadioGroup'; - -const user = userEvent.setup(); - -// Test data: -const name = 'radio-ga-ga'; -const items = [ - { label: 'Ga ga', value: 'ga' }, - { label: 'Goo goo', value: 'goo' }, - { label: 'Blah blah', value: 'blah' }, -]; -const defaultProps: LegacyRadioGroupProps = { - name, - items, -}; - -describe('RadioGroup', () => { - it('Renders radio group', () => { - render(); - expect(screen.getByRole('radiogroup')).toBeInTheDocument(); - }); - - it('Renders all given options', () => { - render(); - expect(getRadioButtons()).toHaveLength(items.length); - }); - - it('Renders legend if given', () => { - const legend = 'Lorem ipsum'; - render({ legend }); - expect(screen.getByText(legend)).toBeInTheDocument(); - }); - - it('Renders description if given', () => { - const description = 'Lorem ipsum dolor sit amet'; - render({ description }); - expect(screen.getByText(description)).toBeInTheDocument(); - }); - - it('Throws an error if there are duplicate values', () => { - const renderFn = () => - render({ - items: [ - { label: 'Test 1', value: 'duplicated value' }, - { label: 'Test 2', value: 'duplicated value' }, - ], - }); - vi.spyOn(console, 'error').mockImplementation(vi.fn()); // Keeps the console output clean - expect(renderFn).toThrow('Each value in the radio group must be unique.'); - }); - - it('Sets the given name on all radio buttons', () => { - render(); - getRadioButtons().forEach((radio) => { - expect(radio).toHaveAttribute('name', name); - }); - }); - - it('Sets values and labels on all radio buttons', () => { - render(); - items.forEach(({ label, value }) => { - expect(screen.getByLabelText(label)).toHaveAttribute('value', value); - }); - }); - - it('Does not check any radio button by default', () => { - render(); - getRadioButtons().forEach((_, index) => expectNotChecked(index)); - }); - - it('Checks the radio button given in the "value" property if given', () => { - const valueIndex = 1; - render({ value: items[valueIndex].value }); - expectOneChecked(valueIndex); - }); - - it('Does not call onChange handler on first render if no value if given', () => { - const onChange = vi.fn(); - render({ onChange }); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Does not call onChange handler on first render if a value if given', () => { - const valueIndex = 1; - const onChange = vi.fn(); - render({ value: items[valueIndex].value, onChange }); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Does not call onChange handler if component rerenders with the same value', () => { - const valueIndex = 1; - const { value } = items[valueIndex]; - const onChange = vi.fn(); - const { rerender } = render({ value, onChange }); - rerender(); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Calls onChange handler with the checked value if component rerenders with another value', () => { - const onChange = vi.fn(); - const { rerender } = render({ value: items[1].value, onChange }); - const valueIndex = 2; - const { value } = items[valueIndex]; - rerender(); - expect(onChange).toHaveBeenCalledTimes(1); - expect(onChange).toHaveBeenCalledWith(value); - }); - - it('Checks radio button and calls onChange handler with the checked value when a radio button is clicked', async () => { - const onChange = vi.fn(); - render({ onChange }); - let i = 0; - while (i < items.length) { - await act(() => user.click(getRadioButton(i))); - expectOneChecked(i); - expect(onChange).toHaveBeenCalledWith(defaultProps.items[i].value); - i++; - expect(onChange).toHaveBeenCalledTimes(i); - } - }); - - it('Focuses on the first radio button if none is checked and user tabs', async () => { - const { container } = render(); - await act(() => user.click(container)); - await act(() => user.tab()); - expect(getRadioButton(0)).toHaveFocus(); - }); - - it('Focuses on the checked radio button if user tabs', async () => { - const checkedIndex = 1; - const { container } = render({ value: items[checkedIndex].value }); - await act(() => user.click(container)); - await act(() => user.tab()); - expect(getRadioButton(checkedIndex)).toHaveFocus(); - }); - - it('Moves focus and checks the focused button when navigating with arrow keys', async () => { - render(); - await act(() => user.click(getRadioButton(0))); - await act(() => user.keyboard('{ArrowDown}')); - expectOneChecked(1); - expect(getRadioButton(1)).toHaveFocus(); - await act(() => user.keyboard('{ArrowUp}')); - expectOneChecked(0); - expect(getRadioButton(0)).toHaveFocus(); - }); - - it('Disables all radio buttons when the "disabled" prop is true', () => { - render({ disabled: true }); - getRadioButtons().forEach((radio) => expect(radio).toBeDisabled()); - }); - - it('Does not call the onChange handler when the "disabled" prop is true', async () => { - const onChange = vi.fn(); - render({ disabled: true, onChange }); - await act(() => user.click(getRadioButton(0))); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('Renders radio buttons with the properties given in the "items" prop', () => { - const description = 'Description', - label = 'Label', - radioId = 'id', - value = 'value'; - const items = [{ description, disabled: true, label, radioId, value }]; - render({ items }); - const radio = getRadioButton(0); - expect(radio.getAttribute('value')).toEqual(value); - expect(radio.getAttribute('id')).toEqual(radioId); - expect(radio).toBeDisabled(); - expect(screen.getByText(label)).toBeDefined(); - expect(screen.getByText(description)).toBeDefined(); - }); - - it('Renders with "vertical" variant class and "small" size classname by default', () => { - render(); - expect(screen.getByRole('radiogroup')).toHaveClass('vertical', 'small'); - }); - - it('Renders with "vertical" variant class if variant is set to "Vertical"', () => { - render({ variant: 'vertical' }); - expect(screen.getByRole('radiogroup')).toHaveClass('vertical'); - }); - - it('Renders with "horizontal" variant class if variant is set to "Horizontal"', () => { - render({ variant: 'horizontal' }); - expect(screen.getByRole('radiogroup')).toHaveClass('horizontal'); - }); - - it('Renders with "xsmall" size class if size is set to "Xsmall"', () => { - render({ size: 'xsmall' }); - expect(screen.getByRole('radiogroup')).toHaveClass('xsmall'); - }); - - it('Renders with "small" size class if size is set to "Small"', () => { - render({ size: 'small' }); - expect(screen.getByRole('radiogroup')).toHaveClass('small'); - }); - - it('Renders all radio buttons with presentation role when the "presentation" property is true', () => { - render({ presentation: true }); - const numberOfRadios = defaultProps.items.length; - expect(screen.queryAllByRole('presentation')).toHaveLength(numberOfRadios); - expect(screen.queryAllByRole('radio')).toHaveLength(0); - expect(screen.queryAllByRole('radiogroup')).toHaveLength(0); - }); -}); - -const render = (props?: Partial) => - renderRtl( - , - ); - -const getRadioButtons = () => screen.queryAllByRole('radio'); -const getRadioButton = (index: number) => getRadioButtons()[index]; -const getWrapper = (index: number) => document.querySelectorAll('label')[index]; - -const expectChecked = (index: number) => { - expect(getRadioButton(index)).toBeChecked(); - expect(getWrapper(index)).toHaveClass('checked'); -}; - -const expectNotChecked = (index: number) => { - expect(getRadioButton(index)).not.toBeChecked(); - expect(getWrapper(index)).not.toHaveClass('checked'); -}; - -const expectOneChecked = (index: number) => { - getRadioButtons().forEach((_, currentIndex) => { - currentIndex === index - ? expectChecked(currentIndex) - : expectNotChecked(currentIndex); - }); -}; diff --git a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx b/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx deleted file mode 100644 index 0c2e7f7e45..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import type { ChangeEvent, ReactNode } from 'react'; -import { useEffect, useState } from 'react'; - -import { LegacyRadioButton } from '../LegacyRadioButton'; -import type { LegacyFieldSetProps } from '../LegacyFieldSet'; -import { LegacyFieldSet } from '../LegacyFieldSet'; -import { usePrevious, useUpdate } from '../../../hooks'; -import { areItemsUnique } from '../../../utilities'; -import type { LegacyRadioButtonProps } from '../LegacyRadioButton'; - -import classes from './RadioGroup.module.css'; - -export type RadioGroupItem = Omit< - LegacyRadioButtonProps, - 'checked' | 'error' | 'name' | 'onChange' | 'showLabel' | 'size' ->; - -export interface LegacyRadioGroupProps { - description?: ReactNode; - disabled?: boolean; - error?: ReactNode; - helpText?: ReactNode; - items: RadioGroupItem[]; - legend?: ReactNode; - name: string; - onChange?: (value?: string) => void; - presentation?: boolean; - size?: 'small' | 'xsmall'; - value?: string; - variant?: 'vertical' | 'horizontal'; - fieldSetProps?: Partial; -} -/** - * - * @note - * Replaced by new {@link https://storybook.designsystemet.no/?path=/docs/komponenter-radio-group--docs Radio.Group} component. - */ -const LegacyRadioGroup = ({ - description, - disabled, - error, - helpText, - items, - legend, - name, - onChange, - presentation, - size = 'small', - value, - variant = 'vertical', - fieldSetProps, -}: LegacyRadioGroupProps) => { - if (!areItemsUnique(items.map((item) => item.value))) { - throw Error('Each value in the radio group must be unique.'); - } - - const [checkedValue, setCheckedValue] = useState(value); - - useEffect(() => { - setCheckedValue(value); - }, [value]); - - const prevCheckedValue = usePrevious(checkedValue); - - useUpdate(() => { - onChange && - !disabled && - prevCheckedValue !== checkedValue && - onChange(checkedValue); - }, [checkedValue, disabled, onChange]); - - const changeHandler = (val: string) => (e: ChangeEvent) => - e.target.checked && setCheckedValue(val); - - return ( - -
- {items.map((radio) => ( - - ))} -
- - ); -}; - -LegacyRadioGroup.displayName = 'LegacyRadioGroup'; - -export { LegacyRadioGroup }; diff --git a/packages/react-old/src/components/legacy/LegacyRadioGroup/index.ts b/packages/react-old/src/components/legacy/LegacyRadioGroup/index.ts deleted file mode 100644 index ad083eb488..0000000000 --- a/packages/react-old/src/components/legacy/LegacyRadioGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './RadioGroup'; diff --git a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ExampleData.ts b/packages/react-old/src/components/legacy/LegacyResponsiveTable/ExampleData.ts deleted file mode 100644 index d8e35ae100..0000000000 --- a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ExampleData.ts +++ /dev/null @@ -1,82 +0,0 @@ -export interface ExampleTableData { - caseNum: number; - product: string; - status: string; - image: { src: string; alt: string }; -} - -export const exampleRows: ExampleTableData[] = [ - { - caseNum: 20220873, - product: 'Emballasje for snacksprodukter', - status: 'Under behandling', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/9/21/317574.png', - alt: 'Potetgullpose', - }, - }, - { - caseNum: 20220590, - product: 'Apparat for rengjøring av sveisesøm', - status: 'Registert', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/6/30/313443.jpg', - alt: 'Apparat for rengjøring av sveisesøm', - }, - }, - { - caseNum: 20220827, - product: 'Logo', - status: 'Besluttet gjeldende', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/9/17/317418.JPG', - alt: 'Logo', - }, - }, - { - caseNum: 20220582, - product: - 'Modul for handikaprampe, bunnramme til modul for handikaprampe, rekkverk til modul for handikaprampe', - status: 'Registrert', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/6/20/313066.jpg', - alt: 'Bilde av handikaprampe', - }, - }, - { - caseNum: 20220408, - product: 'Bil', - status: 'Registert', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/5/11/310547.jpg', - alt: 'Bil', - }, - }, - { - caseNum: 20208507, - product: 'Vippesykkel', - status: 'Besluttet gjeldende', - image: { - src: 'https://search.patentstyret.no/Onlinedb_files_tm/Pictures/200208/200208507.jpg', - alt: 'Vippesykkel', - }, - }, - { - caseNum: 20081269, - product: 'SHELL', - status: 'Besluttet gjeldende', - image: { - src: 'https://search.patentstyret.no/Onlinedb_files_tm/Pictures/200431/200812696.jpg', - alt: 'Shell', - }, - }, - { - caseNum: 20110659, - product: 'DNB', - status: 'Registrert', - image: { - src: 'https://search.patentstyret.no/Onlinedb_files_tm/Pictures/200448/201106591_5%20Figurmerker%20og%20bilder(cropped)%20-%201_200523766_0.jpg', - alt: 'Dnb', - }, - }, -]; diff --git a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.stories.mdx b/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.stories.mdx deleted file mode 100644 index 52067f475b..0000000000 --- a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.stories.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import { exampleRows } from './ExampleData'; -import classes from './Table.stories.module.css'; - -import { LegacyResponsiveTable } from './'; - - - -export const Template = () => ( - - console.log( - 'Change sort of column ' + - column + - ' to ' + - next + - ' from ' + - previous, - ), - sortable: ['caseNum', 'product'], - currentlySortedColumn: 'caseNum', - currentDirection: 'notActive', - }, - renderCell: { - image: (imageObj) => ( - {imageObj.alt} - ), - }, - rowSelection: { - onSelectionChange: (row) => console.log('Select row:', row), - selectedValue: { - caseNum: 20220408, - product: 'Bil', - status: 'Registert', - image: { - src: 'https://search.patentstyret.no/onlinedb_files_ds/Pictures/2022/5/11/310547.jpg', - alt: 'Bil', - }, - }, - }, - footer: 'Lorem ipsum dolor sit amet.', - }} - /> -); - -# LegacyResponsiveTable - - - -## Eksempel - - - {Template.bind({})} - - -## Egenskaper - - diff --git a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.tsx b/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.tsx deleted file mode 100644 index 4f69a1734a..0000000000 --- a/packages/react-old/src/components/legacy/LegacyResponsiveTable/ResponsiveTable.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import * as tokens from '@altinn/figma-design-tokens'; - -import { useMediaQuery } from '../../../hooks'; -import { LegacyRadioButton } from '../LegacyRadioButton'; -import type { SortProps, SortDirection } from '../LegacyTable/utils'; -import { - LegacyTable, - LegacyTableHeader, - LegacyTableRow, - LegacyTableCell, - LegacyTableBody, - LegacyTableFooter, -} from '../LegacyTable'; -import classes from '../LegacyTable/TableCell.module.css'; - -export interface LegacyResponsiveTableConfig { - rows: T[]; - headers: { [Col in keyof T]: string | JSX.Element }; - showColumnsMobile?: (keyof T)[]; - /** - * Custom per-cell rendering. All cells will render their content directly by default (assumed to be string, number - * or some simple scalar type). If you need to override how each cell is rendered, you can supply a render function here. - */ - renderCell?: { [K in keyof T]?: (cell: T[K]) => JSX.Element }; - /** - * Column sort functionality. If you set this property, you need to specify which columns/headers are sortable, - * the current state for which column is sorted (along with the direction) and a callback to handle sort changes. - */ - columnSort?: { - onSortChange: (props: SortProps & { column: keyof T }) => void; - sortable: (keyof T)[]; - currentlySortedColumn: keyof T | undefined; - currentDirection: SortDirection | undefined; - }; - /** - * Row selection functionality. If you set this property, you'll enable selecting individual rows. You have to - * handle the selection state yourself, and re-render this component with a new selectedValue whenever it changes. - */ - rowSelection?: { - onSelectionChange: (row: T) => void; - selectedValue: T | undefined; - }; - /** - * Renders some content into a footer row spanning all columns. Usually used for rendering - * a Pagination component. - */ - footer?: JSX.Element; -} - -export interface LegacyResponsiveTableProps { - config: LegacyResponsiveTableConfig; -} - -export function LegacyResponsiveTable({ - config, -}: LegacyResponsiveTableProps) { - const isMobile = useMediaQuery(`(max-width: ${tokens.BreakpointsSm})`); - - return isMobile ? ( - - ) : ( - - ); -} - -function MobileLegacyTable({ config }: LegacyResponsiveTableProps) { - const { rows, headers, showColumnsMobile, renderCell, rowSelection, footer } = - config; - - const selectedRowJson = JSON.stringify(rowSelection?.selectedValue || null); - const columns = Object.keys(headers) as (keyof T)[]; - const numColumns = rowSelection ? 2 : 1; - - return ( - - rowSelection?.onSelectionChange(selectedValue) - } - selectedValue={rowSelection?.selectedValue} - > - - {rows.map((row) => { - const value = JSON.stringify(row); - return ( - - {rowSelection && ( - - rowSelection.onSelectionChange(row)} - value={value} - checked={value === selectedRowJson} - label={value} - hideLabel={true} - /> - - )} - - {columns.map((column) => { - if ( - showColumnsMobile && - !showColumnsMobile.includes(column) - ) { - return; - } - - const renderFunc = renderCell && renderCell[column]; - const content = renderFunc - ? renderFunc(row[column]) - : (row[column] as string); - - return ( - <> -
{headers[column]}
-
{content}
- - ); - })} - - - ); - })} - - {footer && ( - - - {footer} - - - )} - - ); -} - -function LaptopLegacyTable({ config }: LegacyResponsiveTableProps) { - const { rows, headers, renderCell, columnSort, rowSelection, footer } = - config; - - const selectedRowJson = JSON.stringify(rowSelection?.selectedValue || null); - const columns = Object.keys(headers) as (keyof T)[]; - const numColumns = rowSelection - ? Object.keys(headers).length + 1 - : Object.keys(headers).length; - - return ( - - rowSelection?.onSelectionChange(selectedValue) - } - selectedValue={rowSelection?.selectedValue} - > - - - {rowSelection && ( - - )} - {columns.map((column) => ( - { - columnSort && - columnSort.onSortChange({ column, next, previous }); - }} - sortDirection={ - columnSort - ? columnSort.currentlySortedColumn === column - ? columnSort.currentDirection - : columnSort.sortable.includes(column) - ? 'notActive' - : 'notSortable' - : 'notSortable' - } - > - {headers[column]} - - ))} - - - - {rows.map((row) => { - const value = JSON.stringify(row); - return ( - - {rowSelection && ( - - rowSelection.onSelectionChange(row)} - value={value} - checked={value === selectedRowJson} - label={value} - hideLabel={true} - > - - )} - {columns.map((column) => { - const renderFunc = renderCell && renderCell[column]; - return ( - - {renderFunc - ? renderFunc(row[column]) - : (row[column] as string)} - - ); - })} - - ); - })} - - {footer && ( - - - {footer} - - - )} - - ); -} diff --git a/packages/react-old/src/components/legacy/LegacyResponsiveTable/Table.stories.module.css b/packages/react-old/src/components/legacy/LegacyResponsiveTable/Table.stories.module.css deleted file mode 100644 index 4e386ebe17..0000000000 --- a/packages/react-old/src/components/legacy/LegacyResponsiveTable/Table.stories.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.img { - max-height: 45px; - max-width: 45px; -} diff --git a/packages/react-old/src/components/legacy/LegacyResponsiveTable/index.ts b/packages/react-old/src/components/legacy/LegacyResponsiveTable/index.ts deleted file mode 100644 index 8bc1443a71..0000000000 --- a/packages/react-old/src/components/legacy/LegacyResponsiveTable/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { LegacyResponsiveTable } from './ResponsiveTable'; -export type { - LegacyResponsiveTableProps, - LegacyResponsiveTableConfig, -} from './ResponsiveTable'; diff --git a/packages/react-old/src/components/legacy/LegacySelect/MultiSelect.stories.mdx b/packages/react-old/src/components/legacy/LegacySelect/MultiSelect.stories.mdx deleted file mode 100644 index 3d86c1940c..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/MultiSelect.stories.mdx +++ /dev/null @@ -1,388 +0,0 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; - -import { Information } from '@doc-components'; - -import { LegacySelect } from './'; - - - -export const defaultArgs = { - deleteButtonLabel: 'Fjern alle', - label: 'Velg ett eller flere fylker', - multiple: true, - options: [ - { - label: 'Agder', - value: 'Agd', - keywords: ['agder', 'aust-agder', 'vest-agder'], - }, - { - label: 'Innlandet', - value: 'Inn', - keywords: ['innlandet', 'hedmark', 'oppland'], - }, - { - label: 'Møre og Romsdal', - value: 'MoR', - keywords: ['møre og romsdal', 'møre', 'romsdal'], - }, - { label: 'Nordland', value: 'Nor', keywords: ['nordland'] }, - { label: 'Oslo', value: 'Osl', keywords: ['oslo'] }, - { label: 'Rogaland', value: 'Rog', keywords: ['rogaland'] }, - { - label: 'Vestfold og Telemark', - value: 'VoT', - keywords: ['vestfold og telemark', 'vestfold', 'telemark'], - }, - { - label: 'Troms og Finnmark', - value: 'ToF', - keywords: ['troms og finnmark', 'troms', 'finnmark'], - }, - { - label: 'Trøndelag', - value: 'Trø', - keywords: ['trøndelag', 'nord-trøndelag', 'sør-trøndelag'], - }, - { - label: 'Vestland', - value: 'Ves', - keywords: ['vestland', 'hordaland', 'sogn og fjordane'], - }, - { - label: 'Viken', - value: 'Vik', - keywords: ['viken', 'østfold', 'akershus', 'buskerud'], - }, - ].map((option) => ({ - ...option, - deleteButtonLabel: 'Slett ' + option.label, - })), -}; -export const Template = (args = {}) => ( -
- -
-); - -# LegacySelect (flervalg) - - - -Når `multiple`-egenskapen er satt på, `LegacySelect` får brukeren mulighet til å velge flere enn ett alternativ. -Verdien i feltet behandles da som en liste med tekststrenger. - -## Eksempler - -### Normal visning - - - - {Template.bind({})} - - - -### Deaktivert - - - - {Template.bind({})} - - - -### Med feil - - - - {Template.bind({})} - - - -### Med formaterte alternativer - - - - Agder - - Arendal, Farsund, Flekkefjord, Grimstad, Kristiansand, - Lillesand, Lyngdal, Mandal, Risør, Tvedestrand - - - ), - deleteButtonLabel: 'Fjern Agder', - }, - { - label: 'Innlandet', - value: 'Inn', - keywords: ['innlandet'], - formattedLabel: ( - - Innlandet - - Brumunddal, Elverum, Fagernes, Gjøvik, Hamar, Kongsvinger, - Lillehammer, Moelv, Otta, Raufoss, Vinstra - - - ), - deleteButtonLabel: 'Fjern Innlandet', - }, - { - label: 'Møre og Romsdal', - value: 'MoR', - keywords: ['møre og romsdal', 'møre', 'romsdal'], - formattedLabel: ( - - Møre og Romsdal - - Fosnavåg, Kristiansund, Molde, Ulsteinvik, Ålesund, Åndalsnes - - - ), - deleteButtonLabel: 'Fjern Møre og Romsdal', - }, - { - label: 'Nordland', - value: 'Nor', - keywords: ['nordland'], - formattedLabel: ( - - Nordland - - Bodø, Brønnøysund, Fauske, Leknes, Mo i Rana, Mosjøen, Narvik, - Sandnessjøen, Sortland, Stokmarknes, Svolvær - - - ), - deleteButtonLabel: 'Fjern Nordland', - }, - { - label: 'Oslo', - value: 'Osl', - keywords: ['oslo'], - formattedLabel: ( - - Oslo - Oslo - - ), - deleteButtonLabel: 'Fjern Oslo', - }, - { - label: 'Rogaland', - value: 'Rog', - keywords: ['rogaland'], - formattedLabel: ( - - Rogaland - - Bryne, Egersund, Haugesund, Jørpeland, Kopervik, Sandnes, Sauda, - Skudeneshavn, Stavanger, Åkrehamn - - - ), - deleteButtonLabel: 'Fjern Rogaland', - }, - { - label: 'Troms og Finnmark', - value: 'ToF', - keywords: ['troms og finnmark', 'troms', 'finnmark'], - formattedLabel: ( - - Troms og Finnmark - - Alta, Bardufoss, Finnsnes, Hammerfest, Harstad, Honningsvåg, - Kirkenes, Tromsø, Vadsø, Vardø - - - ), - deleteButtonLabel: 'Fjern Troms og Finnmark', - }, - { - label: 'Trøndelag', - value: 'Trø', - keywords: ['trøndelag', 'nord-trøndelag', 'sør-trøndelag'], - formattedLabel: ( - - Trøndelag - - Brekstad, Kolvereid, Levanger, Namsos, Orkanger, Røros, Rørvik, - Steinkjer, Stjørdalshalsen, Trondheim, Verdalsøra - - - ), - deleteButtonLabel: 'Fjern Trøndelag', - }, - { - label: 'Vestfold og Telemark', - value: 'VoT', - keywords: ['vestfold og telemark', 'vestfold', 'telemark'], - formattedLabel: ( - - Vestfold og Telemark - - Brevik, Holmestrand, Horten, Kragerø, Langesund, Larvik, - Notodden, Porsgrunn, Rjukan, Sandefjord, Skien, Stathelle, - Stavern, Tønsberg - - - ), - deleteButtonLabel: 'Fjern Vestfold og Telemark', - }, - { - label: 'Vestland', - value: 'Ves', - keywords: ['vestland', 'hordaland', 'sogn og fjordane'], - formattedLabel: ( - - Vestland - Bergen, Florø, Førde, Måløy, Odda, Stord - - ), - deleteButtonLabel: 'Fjern Vestland', - }, - { - label: 'Viken', - value: 'Vik', - keywords: ['viken', 'østfold', 'akershus', 'buskerud'], - formattedLabel: ( - - Viken - - Askim, Drammen, Drøbak, Fredrikstad, Halden, Hokksund, Hønefoss, - Jessheim, Kongsberg, Lillestrøm, Moss, Mysen, Sandvika, - Sarpsborg, Ski, Svelvik - - - ), - deleteButtonLabel: 'Fjern Viken', - }, - ], - }} - > - {Template.bind({})} - - - -## Egenskaper - - - -## Tilgjengelighet - -### Mus - -Nedtrekkslisten åpnes ved å klikke på feltet med musen. Deretter kan man klikke på alternativene man ønsker å velge. -Klikker man på et allerede valgt alternativ, fjernes alternativet igjen fra listen over valgte alternativer. -Hvis alternativet ikke er synlig, kan man rulle seg frem til det ved bruk av rullefelt eller musehjul. -Man kan også fjerne alternativer ved å klikke på krysset ved siden av alternativet man ønsker å fjerne. -Klikker man på krysset helt til høyre i feltet, fjernes alle alternativene. - -### Tastatur - -Nedtrekkslisten åpnes ved å trykke på `Enter`, `Space` eller en av de vertikale piltastene når pilknappen har fokus. -Deretter kan man navigere seg frem til ønsket alternativ ved bruk av piltastene. -Man velger så alternativer ved å bruke `Enter`- eller `Space`-tasten. -Sletteknappene (de med kryss på) nås på vanlig måte ved hjelp av tabulatortasten. diff --git a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.module.css b/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.module.css deleted file mode 100644 index 4c8c37031a..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.multiSelectItem { - --border-radius: calc(var(--multiselect_item-height) / 2); - - align-items: center; - background-color: var(--multiselect_item-background_color); - border-radius: var(--border-radius); - color: var(--multiselect_item-text_color); - display: inline-flex; - font-size: var(--font_size); - gap: var(--multiselect_item-space_between); - height: var(--multiselect_item-height); - padding-left: var(--multiselect_item-space_left); -} - -.deleteButton { - background-color: transparent; - border-bottom-right-radius: inherit; - border-top-right-radius: inherit; - border: 0; - cursor: var(--interactive_element-cursor); - height: 100%; - padding: calc((var(--multiselect_item-height) - var(--delete_cross-size)) / 2); - width: var(--multiselect_item-height); -} - -.deleteButton:focus { - background-color: var(--delete_cross_box-color-hover); -} - -.deleteButton:not(:disabled):hover { - background-color: var(--delete_cross_box-color-hover); -} - -.deleteButtonCross { - background-color: var(--multiselect_item_delete_cross-color); - clip-path: var(--delete_cross-clip_path); - display: inline-block; - height: var(--delete_cross-size); - width: var(--delete_cross-size); -} diff --git a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.test.tsx b/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.test.tsx deleted file mode 100644 index 482db9d5c9..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import { act } from 'react'; -import userEvent from '@testing-library/user-event'; - -import type { MultiSelectItemProps } from './MultiSelectItem'; -import { MultiSelectItem } from './MultiSelectItem'; - -const user = userEvent.setup(); - -const onDeleteButtonClick = vi.fn(); -const label = 'Option'; -const defaultMultiSelectItemProps: MultiSelectItemProps = { - disabled: false, - onDeleteButtonClick, - label, -}; - -describe('MultiSelectItem', () => { - it('Displays given value', () => { - renderMultiSelectItem(); - expect(screen.getByText(label)).toBeTruthy(); - }); - - it('Calls onDeleteButtonClick when delete button is clicked', async () => { - renderMultiSelectItem(); - await act(() => user.click(screen.getByRole('button'))); - expect(onDeleteButtonClick).toHaveBeenCalledTimes(1); - }); - - it('Has accessible name on delete button if given', () => { - const deleteButtonLabel = 'Delete item'; - renderMultiSelectItem({ deleteButtonLabel }); - expect(screen.getByRole('button')).toHaveAccessibleName(deleteButtonLabel); - }); - - it('Enables delete button when not disabled', () => { - renderMultiSelectItem(); - expect(screen.getByRole('button')).toBeEnabled(); - }); - - it('Disables delete button when disabled', () => { - renderMultiSelectItem({ disabled: true }); - expect(screen.getByRole('button')).toBeDisabled(); - }); -}); - -const renderMultiSelectItem = (props?: Partial) => - render( - , - ); diff --git a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.tsx b/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.tsx deleted file mode 100644 index 686788109f..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/MultiSelectItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import utilClasses from '../../../../utilities/utility.module.css'; - -import classes from './MultiSelectItem.module.css'; - -export interface MultiSelectItemProps { - deleteButtonLabel?: string; - disabled: boolean; - onDeleteButtonClick: () => void; - label: string; -} - -const MultiSelectItem = ({ - deleteButtonLabel, - disabled, - onDeleteButtonClick, - label, -}: MultiSelectItemProps) => ( - - {label} - - -); - -MultiSelectItem.displayName = 'MultiSelectItem'; - -export { MultiSelectItem }; diff --git a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/index.ts b/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/index.ts deleted file mode 100644 index cfcd7755ab..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/MultiSelectItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { MultiSelectItem } from './MultiSelectItem'; diff --git a/packages/react-old/src/components/legacy/LegacySelect/OptionList/Option.test.tsx b/packages/react-old/src/components/legacy/LegacySelect/OptionList/Option.test.tsx deleted file mode 100644 index 9c5035e905..0000000000 --- a/packages/react-old/src/components/legacy/LegacySelect/OptionList/Option.test.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { render as renderRtl, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import type { LegacySingleSelectOption } from '../types'; - -import { Option } from './Option'; -import type { OptionProps } from './Option'; - -const user = userEvent.setup(); - -// Test data: -const id = 'test-id'; -const onClick = vi.fn(); -const label = 'Option'; -const value = 'option'; -const option: LegacySingleSelectOption = { label, value }; -const defaultProps: OptionProps = { - active: false, - id, - multiple: false, - onClick, - option, - selected: false, -}; - -describe('Option', () => { - it('Renders label by default', () => { - render(); - expect(screen.getByRole('option')).toHaveTextContent(label); - }); - - it('Renders with given value', () => { - render(); - expect(screen.getByRole('option')).toHaveAttribute('value', value); - }); - - it('Renders formattedLabel if provided', () => { - const formattedLabelText = 'Formatted label'; - const formattedLabel = {formattedLabelText}; - render({ option: { ...option, formattedLabel } }); - expect(screen.getByRole('option')).toHaveTextContent(formattedLabelText); - }); - - it('Calls onClick with value as a parameter when user clicks', async () => { - render(); - await user.click(screen.getByRole('option')); - expect(onClick).toHaveBeenCalledTimes(1); - expect(onClick).toHaveBeenCalledWith(value); - }); - - it('Renders option with given id', () => { - render(); - expect(screen.getByRole('option')).toHaveAttribute('id', id); - }); -}); - -const render = (props: Partial = {}) => - renderRtl( -