@navikt/ds-react 6.10.1 → 6.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/alert/Alert.d.ts +5 -0
- package/cjs/alert/Alert.js +5 -3
- package/cjs/alert/Alert.js.map +1 -1
- package/cjs/collapsible/parts/Collapsible.Content.js +1 -1
- package/cjs/collapsible/parts/Collapsible.Trigger.js +1 -1
- package/cjs/date/datepicker/types.d.ts +1 -1
- package/cjs/date/monthpicker/types.d.ts +1 -1
- package/cjs/form/file-upload/parts/Trigger.js +1 -1
- package/cjs/form/file-upload/parts/item/Item.d.ts +5 -0
- package/cjs/form/file-upload/parts/item/Item.js +2 -2
- package/cjs/form/file-upload/parts/item/Item.js.map +1 -1
- package/cjs/layout/base/BasePrimitive.d.ts +167 -0
- package/cjs/layout/base/BasePrimitive.js +70 -0
- package/cjs/layout/base/BasePrimitive.js.map +1 -0
- package/cjs/layout/base/PrimitiveAsChildProps.d.ts +41 -0
- package/cjs/layout/base/PrimitiveAsChildProps.js +3 -0
- package/cjs/layout/base/PrimitiveAsChildProps.js.map +1 -0
- package/cjs/layout/bleed/Bleed.js +1 -1
- package/cjs/layout/box/Box.d.ts +14 -35
- package/cjs/layout/box/Box.js +15 -4
- package/cjs/layout/box/Box.js.map +1 -1
- package/cjs/layout/grid/HGrid.d.ts +7 -5
- package/cjs/layout/grid/HGrid.js +7 -2
- package/cjs/layout/grid/HGrid.js.map +1 -1
- package/cjs/layout/page/Page.d.ts +4 -3
- package/cjs/layout/page/Page.js.map +1 -1
- package/cjs/layout/responsive/Responsive.js +1 -1
- package/cjs/layout/stack/HStack.d.ts +2 -1
- package/cjs/layout/stack/HStack.js.map +1 -1
- package/cjs/layout/stack/Stack.d.ts +8 -5
- package/cjs/layout/stack/Stack.js +10 -5
- package/cjs/layout/stack/Stack.js.map +1 -1
- package/cjs/layout/stack/VStack.d.ts +2 -1
- package/cjs/layout/stack/VStack.js.map +1 -1
- package/cjs/layout/utilities/css.js +3 -0
- package/cjs/layout/utilities/css.js.map +1 -1
- package/cjs/layout/utilities/types.d.ts +2 -1
- package/cjs/list/ListItem.js +2 -2
- package/cjs/list/ListItem.js.map +1 -1
- package/cjs/modal/dialog-polyfill.js +0 -3
- package/cjs/modal/dialog-polyfill.js.map +1 -1
- package/cjs/overlays/dismissablelayer/DismissableLayer.js +1 -1
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.d.ts +2 -2
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.js +6 -2
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.js.map +1 -1
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.d.ts +1 -1
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.js +3 -1
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.js.map +1 -1
- package/cjs/overlays/floating/Floating.js +1 -1
- package/cjs/pagination/Pagination.d.ts +7 -0
- package/cjs/pagination/Pagination.js +5 -2
- package/cjs/pagination/Pagination.js.map +1 -1
- package/cjs/pagination/PaginationItem.js +4 -2
- package/cjs/pagination/PaginationItem.js.map +1 -1
- package/cjs/portal/Portal.js +1 -1
- package/cjs/slot/Slot.d.ts +6 -0
- package/cjs/{util → slot}/Slot.js +6 -37
- package/cjs/slot/Slot.js.map +1 -0
- package/cjs/slot/merge-props.d.ts +4 -0
- package/cjs/slot/merge-props.js +37 -0
- package/cjs/slot/merge-props.js.map +1 -0
- package/cjs/toggle-group/ToggleGroup.d.ts +3 -3
- package/cjs/toggle-group/ToggleGroup.js +3 -3
- package/cjs/toggle-group/parts/ToggleItem.d.ts +32 -5
- package/cjs/toggle-group/parts/ToggleItem.js +4 -2
- package/cjs/toggle-group/parts/ToggleItem.js.map +1 -1
- package/cjs/toggle-group/parts/useToggleItem.js +1 -1
- package/cjs/toggle-group/parts/useToggleItem.js.map +1 -1
- package/cjs/util/hooks/descendants/useDescendant.js +1 -1
- package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
- package/cjs/util/hooks/descendants/utils.js +1 -1
- package/cjs/util/hooks/descendants/utils.js.map +1 -1
- package/cjs/util/i18n/get.js +3 -2
- package/cjs/util/i18n/get.js.map +1 -1
- package/cjs/util/types/AsChildProps.d.ts +1 -0
- package/esm/alert/Alert.d.ts +5 -0
- package/esm/alert/Alert.js +5 -3
- package/esm/alert/Alert.js.map +1 -1
- package/esm/collapsible/parts/Collapsible.Content.js +1 -1
- package/esm/collapsible/parts/Collapsible.Trigger.js +1 -1
- package/esm/date/datepicker/types.d.ts +1 -1
- package/esm/date/monthpicker/types.d.ts +1 -1
- package/esm/form/file-upload/parts/Trigger.js +1 -1
- package/esm/form/file-upload/parts/item/Item.d.ts +5 -0
- package/esm/form/file-upload/parts/item/Item.js +2 -2
- package/esm/form/file-upload/parts/item/Item.js.map +1 -1
- package/esm/layout/base/BasePrimitive.d.ts +167 -0
- package/esm/layout/base/BasePrimitive.js +63 -0
- package/esm/layout/base/BasePrimitive.js.map +1 -0
- package/esm/layout/base/PrimitiveAsChildProps.d.ts +41 -0
- package/esm/layout/base/PrimitiveAsChildProps.js +2 -0
- package/esm/layout/base/PrimitiveAsChildProps.js.map +1 -0
- package/esm/layout/bleed/Bleed.js +1 -1
- package/esm/layout/box/Box.d.ts +14 -35
- package/esm/layout/box/Box.js +15 -4
- package/esm/layout/box/Box.js.map +1 -1
- package/esm/layout/grid/HGrid.d.ts +7 -5
- package/esm/layout/grid/HGrid.js +7 -2
- package/esm/layout/grid/HGrid.js.map +1 -1
- package/esm/layout/page/Page.d.ts +4 -3
- package/esm/layout/page/Page.js.map +1 -1
- package/esm/layout/responsive/Responsive.js +1 -1
- package/esm/layout/stack/HStack.d.ts +2 -1
- package/esm/layout/stack/HStack.js.map +1 -1
- package/esm/layout/stack/Stack.d.ts +8 -5
- package/esm/layout/stack/Stack.js +10 -5
- package/esm/layout/stack/Stack.js.map +1 -1
- package/esm/layout/stack/VStack.d.ts +2 -1
- package/esm/layout/stack/VStack.js.map +1 -1
- package/esm/layout/utilities/css.js +3 -0
- package/esm/layout/utilities/css.js.map +1 -1
- package/esm/layout/utilities/types.d.ts +2 -1
- package/esm/list/ListItem.js +3 -3
- package/esm/list/ListItem.js.map +1 -1
- package/esm/modal/dialog-polyfill.js +0 -3
- package/esm/modal/dialog-polyfill.js.map +1 -1
- package/esm/overlays/dismissablelayer/DismissableLayer.js +1 -1
- package/esm/overlays/dismissablelayer/util/useFocusOutside.d.ts +2 -2
- package/esm/overlays/dismissablelayer/util/useFocusOutside.js +6 -2
- package/esm/overlays/dismissablelayer/util/useFocusOutside.js.map +1 -1
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.d.ts +1 -1
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.js +3 -1
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.js.map +1 -1
- package/esm/overlays/floating/Floating.js +1 -1
- package/esm/pagination/Pagination.d.ts +7 -0
- package/esm/pagination/Pagination.js +6 -3
- package/esm/pagination/Pagination.js.map +1 -1
- package/esm/pagination/PaginationItem.js +4 -2
- package/esm/pagination/PaginationItem.js.map +1 -1
- package/esm/portal/Portal.js +1 -1
- package/esm/slot/Slot.d.ts +6 -0
- package/esm/slot/Slot.js +32 -0
- package/esm/slot/Slot.js.map +1 -0
- package/esm/slot/merge-props.d.ts +4 -0
- package/esm/slot/merge-props.js +34 -0
- package/esm/slot/merge-props.js.map +1 -0
- package/esm/toggle-group/ToggleGroup.d.ts +3 -3
- package/esm/toggle-group/ToggleGroup.js +3 -3
- package/esm/toggle-group/parts/ToggleItem.d.ts +32 -5
- package/esm/toggle-group/parts/ToggleItem.js +4 -2
- package/esm/toggle-group/parts/ToggleItem.js.map +1 -1
- package/esm/toggle-group/parts/useToggleItem.js +1 -1
- package/esm/toggle-group/parts/useToggleItem.js.map +1 -1
- package/esm/util/hooks/descendants/useDescendant.js +1 -1
- package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
- package/esm/util/hooks/descendants/utils.js +1 -1
- package/esm/util/hooks/descendants/utils.js.map +1 -1
- package/esm/util/i18n/get.js +3 -2
- package/esm/util/i18n/get.js.map +1 -1
- package/esm/util/types/AsChildProps.d.ts +1 -0
- package/package.json +3 -3
- package/src/alert/Alert.tsx +23 -2
- package/src/collapsible/parts/Collapsible.Content.tsx +1 -1
- package/src/collapsible/parts/Collapsible.Trigger.tsx +1 -1
- package/src/date/datepicker/types.ts +1 -1
- package/src/date/monthpicker/types.ts +1 -1
- package/src/form/file-upload/parts/Trigger.tsx +1 -1
- package/src/form/file-upload/parts/item/Item.tsx +7 -1
- package/src/layout/base/BasePrimitive.tsx +314 -0
- package/src/layout/base/PrimitiveAsChildProps.ts +42 -0
- package/src/layout/bleed/Bleed.tsx +1 -1
- package/src/layout/box/Box.tsx +66 -76
- package/src/layout/grid/HGrid.tsx +73 -45
- package/src/layout/page/Page.tsx +4 -3
- package/src/layout/responsive/Responsive.tsx +1 -1
- package/src/layout/stack/HStack.tsx +2 -1
- package/src/layout/stack/Stack.tsx +80 -62
- package/src/layout/stack/VStack.tsx +3 -1
- package/src/layout/utilities/css.ts +3 -0
- package/src/layout/utilities/types.ts +2 -3
- package/src/list/ListItem.tsx +5 -5
- package/src/modal/dialog-polyfill.ts +0 -3
- package/src/overlays/dismissablelayer/DismissableLayer.tsx +1 -1
- package/src/overlays/dismissablelayer/util/useFocusOutside.ts +6 -2
- package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts +3 -1
- package/src/overlays/floating/Floating.tsx +1 -1
- package/src/pagination/Pagination.tsx +26 -1
- package/src/pagination/PaginationItem.tsx +4 -0
- package/src/portal/Portal.tsx +1 -1
- package/src/slot/Slot.tsx +33 -0
- package/src/{util/Slot.tsx → slot/merge-props.ts} +2 -34
- package/src/slot/tests/merge-props.test.ts +49 -0
- package/src/toggle-group/ToggleGroup.test.tsx +3 -9
- package/src/toggle-group/ToggleGroup.tsx +3 -3
- package/src/toggle-group/parts/ToggleItem.tsx +54 -8
- package/src/toggle-group/parts/useToggleItem.ts +4 -1
- package/src/util/hooks/descendants/useDescendant.tsx +1 -1
- package/src/util/hooks/descendants/utils.ts +1 -1
- package/src/util/i18n/get.ts +4 -2
- package/src/util/types/AsChildProps.ts +1 -0
- package/cjs/layout/sidemal-test/AvatarPanel.d.ts +0 -4
- package/cjs/layout/sidemal-test/AvatarPanel.js +0 -19
- package/cjs/layout/sidemal-test/AvatarPanel.js.map +0 -1
- package/cjs/layout/sidemal-test/Content.d.ts +0 -2
- package/cjs/layout/sidemal-test/Content.js +0 -67
- package/cjs/layout/sidemal-test/Content.js.map +0 -1
- package/cjs/layout/sidemal-test/Filter.d.ts +0 -2
- package/cjs/layout/sidemal-test/Filter.js +0 -49
- package/cjs/layout/sidemal-test/Filter.js.map +0 -1
- package/cjs/layout/sidemal-test/Header.d.ts +0 -2
- package/cjs/layout/sidemal-test/Header.js +0 -49
- package/cjs/layout/sidemal-test/Header.js.map +0 -1
- package/cjs/layout/sidemal-test/Intro.d.ts +0 -2
- package/cjs/layout/sidemal-test/Intro.js +0 -37
- package/cjs/layout/sidemal-test/Intro.js.map +0 -1
- package/cjs/layout/sidemal-test/Sidebar.d.ts +0 -4
- package/cjs/layout/sidemal-test/Sidebar.js +0 -50
- package/cjs/layout/sidemal-test/Sidebar.js.map +0 -1
- package/cjs/layout/sidemal-test/content-box/ContentBox.d.ts +0 -8
- package/cjs/layout/sidemal-test/content-box/ContentBox.js +0 -66
- package/cjs/layout/sidemal-test/content-box/ContentBox.js.map +0 -1
- package/cjs/layout/sidemal-test/content-box/index.d.ts +0 -1
- package/cjs/layout/sidemal-test/content-box/index.js +0 -9
- package/cjs/layout/sidemal-test/content-box/index.js.map +0 -1
- package/cjs/util/Slot.d.ts +0 -6
- package/cjs/util/Slot.js.map +0 -1
- package/esm/layout/sidemal-test/AvatarPanel.d.ts +0 -4
- package/esm/layout/sidemal-test/AvatarPanel.js +0 -12
- package/esm/layout/sidemal-test/AvatarPanel.js.map +0 -1
- package/esm/layout/sidemal-test/Content.d.ts +0 -2
- package/esm/layout/sidemal-test/Content.js +0 -60
- package/esm/layout/sidemal-test/Content.js.map +0 -1
- package/esm/layout/sidemal-test/Filter.d.ts +0 -2
- package/esm/layout/sidemal-test/Filter.js +0 -22
- package/esm/layout/sidemal-test/Filter.js.map +0 -1
- package/esm/layout/sidemal-test/Header.d.ts +0 -2
- package/esm/layout/sidemal-test/Header.js +0 -42
- package/esm/layout/sidemal-test/Header.js.map +0 -1
- package/esm/layout/sidemal-test/Intro.d.ts +0 -2
- package/esm/layout/sidemal-test/Intro.js +0 -30
- package/esm/layout/sidemal-test/Intro.js.map +0 -1
- package/esm/layout/sidemal-test/Sidebar.d.ts +0 -4
- package/esm/layout/sidemal-test/Sidebar.js +0 -41
- package/esm/layout/sidemal-test/Sidebar.js.map +0 -1
- package/esm/layout/sidemal-test/content-box/ContentBox.d.ts +0 -8
- package/esm/layout/sidemal-test/content-box/ContentBox.js +0 -37
- package/esm/layout/sidemal-test/content-box/ContentBox.js.map +0 -1
- package/esm/layout/sidemal-test/content-box/index.d.ts +0 -1
- package/esm/layout/sidemal-test/content-box/index.js +0 -2
- package/esm/layout/sidemal-test/content-box/index.js.map +0 -1
- package/esm/util/Slot.d.ts +0 -6
- package/esm/util/Slot.js +0 -63
- package/esm/util/Slot.js.map +0 -1
- package/src/layout/sidemal-test/AvatarPanel.tsx +0 -27
- package/src/layout/sidemal-test/Content.tsx +0 -129
- package/src/layout/sidemal-test/Filter.tsx +0 -46
- package/src/layout/sidemal-test/Header.tsx +0 -96
- package/src/layout/sidemal-test/Intro.tsx +0 -91
- package/src/layout/sidemal-test/Sidebar.tsx +0 -77
- package/src/layout/sidemal-test/content-box/ContentBox.tsx +0 -46
- package/src/layout/sidemal-test/content-box/index.ts +0 -1
- package/src/layout/sidemal-test/styling.css +0 -43
- /package/src/{util/__tests__ → slot/tests}/Slot.test.tsx +0 -0
|
@@ -90,6 +90,8 @@ export function usePointerDownOutside(
|
|
|
90
90
|
|
|
91
91
|
return {
|
|
92
92
|
// ensures we check React component tree (not just DOM tree)
|
|
93
|
-
onPointerDownCapture: () =>
|
|
93
|
+
onPointerDownCapture: () => {
|
|
94
|
+
isPointerInsideReactTreeRef.current = true;
|
|
95
|
+
},
|
|
94
96
|
};
|
|
95
97
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import cl from "clsx";
|
|
2
2
|
import React, { forwardRef } from "react";
|
|
3
3
|
import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
|
|
4
|
-
import { BodyShort } from "../typography";
|
|
4
|
+
import { BodyShort, Heading } from "../typography";
|
|
5
|
+
import { useId } from "../util";
|
|
5
6
|
import PaginationItem, {
|
|
6
7
|
PaginationItemProps,
|
|
7
8
|
PaginationItemType,
|
|
@@ -47,6 +48,13 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
47
48
|
* @default (item: PaginationItemProps) => <PaginationItem {...item} />
|
|
48
49
|
*/
|
|
49
50
|
renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
|
|
51
|
+
/**
|
|
52
|
+
* Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
|
|
53
|
+
*/
|
|
54
|
+
srHeading?: {
|
|
55
|
+
tag: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
56
|
+
text: string;
|
|
57
|
+
};
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
interface PaginationType
|
|
@@ -117,6 +125,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
|
|
|
117
125
|
className,
|
|
118
126
|
size = "medium",
|
|
119
127
|
prevNextTexts = false,
|
|
128
|
+
srHeading,
|
|
129
|
+
"aria-labelledby": ariaLabelledBy,
|
|
120
130
|
renderItem: Item = (item: PaginationItemProps) => (
|
|
121
131
|
<PaginationItem {...item} />
|
|
122
132
|
),
|
|
@@ -124,6 +134,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
|
|
|
124
134
|
},
|
|
125
135
|
ref,
|
|
126
136
|
) => {
|
|
137
|
+
const headingId = useId();
|
|
138
|
+
|
|
127
139
|
if (page < 1) {
|
|
128
140
|
console.error("page cannot be less than 1");
|
|
129
141
|
return null;
|
|
@@ -145,12 +157,25 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
|
|
|
145
157
|
<nav
|
|
146
158
|
ref={ref}
|
|
147
159
|
{...rest}
|
|
160
|
+
aria-labelledby={
|
|
161
|
+
srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
|
|
162
|
+
}
|
|
148
163
|
className={cl(
|
|
149
164
|
"navds-pagination",
|
|
150
165
|
`navds-pagination--${size}`,
|
|
151
166
|
className,
|
|
152
167
|
)}
|
|
153
168
|
>
|
|
169
|
+
{srHeading && (
|
|
170
|
+
<Heading
|
|
171
|
+
size="xsmall"
|
|
172
|
+
visuallyHidden
|
|
173
|
+
as={srHeading.tag}
|
|
174
|
+
id={headingId}
|
|
175
|
+
>
|
|
176
|
+
{srHeading.text}
|
|
177
|
+
</Heading>
|
|
178
|
+
)}
|
|
154
179
|
<ul className="navds-pagination__list">
|
|
155
180
|
<li>
|
|
156
181
|
<Item
|
|
@@ -33,6 +33,7 @@ export const Item: PaginationItemType = forwardRef(
|
|
|
33
33
|
as: Component = "button",
|
|
34
34
|
selected = false,
|
|
35
35
|
className,
|
|
36
|
+
page,
|
|
36
37
|
...rest
|
|
37
38
|
},
|
|
38
39
|
ref,
|
|
@@ -46,6 +47,9 @@ export const Item: PaginationItemType = forwardRef(
|
|
|
46
47
|
className={cl("navds-pagination__item", className, {
|
|
47
48
|
"navds-pagination__item--selected": selected,
|
|
48
49
|
})}
|
|
50
|
+
data-page={page}
|
|
51
|
+
/* TODO: Breaking change to remove. Add to future major version. */
|
|
52
|
+
page={page}
|
|
49
53
|
{...(Component === "button" && { type: "button" })}
|
|
50
54
|
{...rest}
|
|
51
55
|
>
|
package/src/portal/Portal.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes, forwardRef } from "react";
|
|
2
2
|
import ReactDOM from "react-dom";
|
|
3
3
|
import { useProvider } from "../provider/Provider";
|
|
4
|
-
import { Slot } from "../
|
|
4
|
+
import { Slot } from "../slot/Slot";
|
|
5
5
|
import { AsChildProps } from "../util/types";
|
|
6
6
|
|
|
7
7
|
interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { mergeRefs } from "../util/hooks/useMergeRefs";
|
|
3
|
+
import { mergeProps } from "./merge-props";
|
|
4
|
+
|
|
5
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
|
|
10
|
+
const { children, ...slotProps } = props;
|
|
11
|
+
|
|
12
|
+
if (React.isValidElement(children)) {
|
|
13
|
+
return React.cloneElement<any>(children, {
|
|
14
|
+
...mergeProps(slotProps, children.props),
|
|
15
|
+
ref: forwardedRef
|
|
16
|
+
? mergeRefs([forwardedRef, (children as any).ref])
|
|
17
|
+
: (children as any).ref,
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (React.Children.count(children) > 1) {
|
|
22
|
+
const error = new Error(
|
|
23
|
+
"Aksel: Components using 'asChild' expects to recieve a single React element child.",
|
|
24
|
+
);
|
|
25
|
+
error.name = "SlotError";
|
|
26
|
+
Error.captureStackTrace?.(error, Slot);
|
|
27
|
+
throw error;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return null;
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
export { Slot, type SlotProps };
|
|
@@ -1,37 +1,3 @@
|
|
|
1
|
-
// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { mergeRefs } from "./hooks/useMergeRefs";
|
|
4
|
-
|
|
5
|
-
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
|
6
|
-
children?: React.ReactNode;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
|
|
10
|
-
(props, forwardedRef) => {
|
|
11
|
-
const { children, ...slotProps } = props;
|
|
12
|
-
|
|
13
|
-
if (React.isValidElement(children)) {
|
|
14
|
-
return React.cloneElement<any>(children, {
|
|
15
|
-
...mergeProps(slotProps, children.props),
|
|
16
|
-
ref: forwardedRef
|
|
17
|
-
? mergeRefs([forwardedRef, (children as any).ref])
|
|
18
|
-
: (children as any).ref,
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
if (React.Children.count(children) > 1) {
|
|
23
|
-
const error = new Error(
|
|
24
|
-
"Aksel: Components using 'asChild' expects to recieve a single React element child.",
|
|
25
|
-
);
|
|
26
|
-
error.name = "SlotError";
|
|
27
|
-
Error.captureStackTrace?.(error, Slot);
|
|
28
|
-
throw error;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
return null;
|
|
32
|
-
},
|
|
33
|
-
);
|
|
34
|
-
|
|
35
1
|
function mergeProps(
|
|
36
2
|
slotProps: Record<string, any>,
|
|
37
3
|
childProps: Record<string, any>,
|
|
@@ -69,3 +35,5 @@ function mergeProps(
|
|
|
69
35
|
|
|
70
36
|
return { ...slotProps, ...overrideProps };
|
|
71
37
|
}
|
|
38
|
+
|
|
39
|
+
export { mergeProps };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { describe, expect, test, vi } from "vitest";
|
|
2
|
+
import { mergeProps } from "../merge-props";
|
|
3
|
+
|
|
4
|
+
describe("Testing mergeProps function for Slot", () => {
|
|
5
|
+
test("child props should override slot props", () => {
|
|
6
|
+
const slotProps = { prop1: "slot", prop2: "slot" };
|
|
7
|
+
const childProps = { prop1: "child" };
|
|
8
|
+
const result = mergeProps(slotProps, childProps);
|
|
9
|
+
expect(result).toEqual({ prop1: "child", prop2: "slot" });
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
test("if a handler exists on both slot and child props, the composed function is created", () => {
|
|
13
|
+
const slotClick = vi.fn();
|
|
14
|
+
const childClick = vi.fn();
|
|
15
|
+
const slotProps = { onClick: slotClick };
|
|
16
|
+
const childProps = { onClick: childClick };
|
|
17
|
+
const result = mergeProps(slotProps, childProps);
|
|
18
|
+
|
|
19
|
+
result.onClick();
|
|
20
|
+
|
|
21
|
+
expect(slotClick).toHaveBeenCalledTimes(1);
|
|
22
|
+
expect(childClick).toHaveBeenCalledTimes(1);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
test("if a handler exists only on the slot props, only the slot handler is used", () => {
|
|
26
|
+
const slotClick = vi.fn();
|
|
27
|
+
const slotProps = { onClick: slotClick };
|
|
28
|
+
const childProps = {};
|
|
29
|
+
const result = mergeProps(slotProps, childProps);
|
|
30
|
+
|
|
31
|
+
result.onClick();
|
|
32
|
+
|
|
33
|
+
expect(slotClick).toHaveBeenCalledTimes(1);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
test("if the prop is `style`, the styles are merged", () => {
|
|
37
|
+
const slotProps = { style: { color: "red" } };
|
|
38
|
+
const childProps = { style: { backgroundColor: "blue" } };
|
|
39
|
+
const result = mergeProps(slotProps, childProps);
|
|
40
|
+
expect(result.style).toEqual({ color: "red", backgroundColor: "blue" });
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
test("if the prop is `className`, the class names are joined with a space", () => {
|
|
44
|
+
const slotProps = { className: "class1" };
|
|
45
|
+
const childProps = { className: "class2" };
|
|
46
|
+
const result = mergeProps(slotProps, childProps);
|
|
47
|
+
expect(result.className).toBe("class1 class2");
|
|
48
|
+
});
|
|
49
|
+
});
|
|
@@ -6,15 +6,9 @@ import { ToggleGroup } from "./ToggleGroup";
|
|
|
6
6
|
|
|
7
7
|
const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
|
|
8
8
|
<ToggleGroup value={value} onChange={onChange} defaultValue={defaultValue}>
|
|
9
|
-
<ToggleGroup.Item value="toggle1" data-testid="toggle1"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<ToggleGroup.Item value="toggle2" data-testid="toggle2">
|
|
13
|
-
Toggle 2
|
|
14
|
-
</ToggleGroup.Item>
|
|
15
|
-
<ToggleGroup.Item value="toggle3" data-testid="toggle3">
|
|
16
|
-
Toggle 3
|
|
17
|
-
</ToggleGroup.Item>
|
|
9
|
+
<ToggleGroup.Item value="toggle1" data-testid="toggle1" label="Toggle 1" />
|
|
10
|
+
<ToggleGroup.Item value="toggle2" data-testid="toggle2" label="Toggle 2" />
|
|
11
|
+
<ToggleGroup.Item value="toggle3" data-testid="toggle3" label="Toggle 3" />
|
|
18
12
|
</ToggleGroup>
|
|
19
13
|
);
|
|
20
14
|
|
|
@@ -30,9 +30,9 @@ interface ToggleGroupComponent
|
|
|
30
30
|
* @example
|
|
31
31
|
* ```jsx
|
|
32
32
|
* <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
|
|
33
|
-
* <ToggleGroup.Item value="ulest"
|
|
34
|
-
* <ToggleGroup.Item value="lest"
|
|
35
|
-
* <ToggleGroup.Item value="sendt"
|
|
33
|
+
* <ToggleGroup.Item value="ulest" label="Ulest" />
|
|
34
|
+
* <ToggleGroup.Item value="lest" label="Leste" />
|
|
35
|
+
* <ToggleGroup.Item value="sendt" label="Sendt" />
|
|
36
36
|
* </ToggleGroup>
|
|
37
37
|
* ```
|
|
38
38
|
*/
|
|
@@ -4,21 +4,62 @@ import { BodyShort } from "../../typography/BodyShort";
|
|
|
4
4
|
import { useToggleGroupContext } from "../ToggleGroup.context";
|
|
5
5
|
import { useToggleItem } from "./useToggleItem";
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
extends React.HTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
type BaseProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
|
|
9
8
|
/**
|
|
10
|
-
*
|
|
9
|
+
* Value for state-handling.
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
type ChildrenProps = {
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Use `label` and/or `icon` as replacement.
|
|
11
17
|
*/
|
|
12
18
|
children: React.ReactNode;
|
|
19
|
+
label?: never;
|
|
20
|
+
icon?: never;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
type LabelProps = {
|
|
24
|
+
children?: never;
|
|
13
25
|
/**
|
|
14
|
-
*
|
|
26
|
+
* Item label.
|
|
15
27
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
28
|
+
label: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Item Icon.
|
|
31
|
+
*/
|
|
32
|
+
icon?: React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
type IconProps = {
|
|
36
|
+
children?: never;
|
|
37
|
+
/**
|
|
38
|
+
* Item label.
|
|
39
|
+
*/
|
|
40
|
+
label?: React.ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Item Icon.
|
|
43
|
+
*/
|
|
44
|
+
icon: React.ReactNode;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export type ToggleGroupItemProps = BaseProps &
|
|
48
|
+
(ChildrenProps | LabelProps | IconProps);
|
|
18
49
|
|
|
19
50
|
const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
|
|
20
51
|
(
|
|
21
|
-
{
|
|
52
|
+
{
|
|
53
|
+
className,
|
|
54
|
+
children,
|
|
55
|
+
icon,
|
|
56
|
+
label,
|
|
57
|
+
value,
|
|
58
|
+
onClick,
|
|
59
|
+
onFocus,
|
|
60
|
+
onKeyDown,
|
|
61
|
+
...rest
|
|
62
|
+
},
|
|
22
63
|
forwardedRef,
|
|
23
64
|
) => {
|
|
24
65
|
const itemCtx = useToggleItem(
|
|
@@ -45,7 +86,12 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
|
|
|
45
86
|
className="navds-toggle-group__button-inner"
|
|
46
87
|
size={ctx?.size}
|
|
47
88
|
>
|
|
48
|
-
{children
|
|
89
|
+
{children ?? (
|
|
90
|
+
<>
|
|
91
|
+
{icon}
|
|
92
|
+
{label}
|
|
93
|
+
</>
|
|
94
|
+
)}
|
|
49
95
|
</BodyShort>
|
|
50
96
|
</button>
|
|
51
97
|
);
|
|
@@ -97,7 +97,10 @@ export function useToggleItem<P extends UseToggleItemProps>(
|
|
|
97
97
|
ref: mergeRefs([register, ref]),
|
|
98
98
|
isSelected,
|
|
99
99
|
isFocused: focusedValue === value,
|
|
100
|
-
onClick: composeEventHandlers(
|
|
100
|
+
onClick: composeEventHandlers(
|
|
101
|
+
onClick,
|
|
102
|
+
() => selectedValue !== value && setSelectedValue(value),
|
|
103
|
+
),
|
|
101
104
|
onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
|
|
102
105
|
onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
|
|
103
106
|
};
|
|
@@ -53,7 +53,7 @@ export function createDescendantContext<
|
|
|
53
53
|
useClientLayoutEffect(() => {
|
|
54
54
|
if (!ref.current) return;
|
|
55
55
|
const dataIndex = Number(ref.current.dataset["index"]);
|
|
56
|
-
if (index
|
|
56
|
+
if (index !== dataIndex && !Number.isNaN(dataIndex)) {
|
|
57
57
|
setIndex(dataIndex);
|
|
58
58
|
}
|
|
59
59
|
});
|
package/src/util/i18n/get.ts
CHANGED
|
@@ -38,10 +38,12 @@ export function get(
|
|
|
38
38
|
|
|
39
39
|
function getKeypath(str: string) {
|
|
40
40
|
const path: string[] = [];
|
|
41
|
-
let result
|
|
42
|
-
|
|
41
|
+
let result = OBJECT_NOTATION_MATCHER.exec(str);
|
|
42
|
+
|
|
43
|
+
while (result) {
|
|
43
44
|
const [, first, second] = result;
|
|
44
45
|
path.push(first || second);
|
|
46
|
+
result = OBJECT_NOTATION_MATCHER.exec(str);
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
return path;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.AvatarPanel = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const aksel_icons_1 = require("@navikt/aksel-icons");
|
|
9
|
-
const box_1 = require("../box");
|
|
10
|
-
const stack_1 = require("../stack");
|
|
11
|
-
function AvatarPanel({ children }) {
|
|
12
|
-
return (react_1.default.createElement(box_1.Box, { background: "bg-default", paddingInline: { xs: "4", md: "10" }, paddingBlock: { xs: "10 8", md: "12 10" }, className: "avatar-card", borderRadius: "medium" },
|
|
13
|
-
react_1.default.createElement(stack_1.HStack, { justify: "center" },
|
|
14
|
-
react_1.default.createElement(box_1.Box, { borderRadius: "full", background: "surface-success-moderate", className: "avatar" },
|
|
15
|
-
react_1.default.createElement(aksel_icons_1.PersonIcon, { fontSize: "2rem" }))),
|
|
16
|
-
children));
|
|
17
|
-
}
|
|
18
|
-
exports.AvatarPanel = AvatarPanel;
|
|
19
|
-
//# sourceMappingURL=AvatarPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarPanel.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/AvatarPanel.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAAiD;AACjD,gCAA6B;AAC7B,oCAAkC;AAElC,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAiC;IACrE,OAAO,CACL,8BAAC,SAAG,IACF,UAAU,EAAC,YAAY,EACvB,aAAa,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EACpC,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EACzC,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,QAAQ;QAErB,8BAAC,cAAM,IAAC,OAAO,EAAC,QAAQ;YACtB,8BAAC,SAAG,IACF,YAAY,EAAC,MAAM,EACnB,UAAU,EAAC,0BAA0B,EACrC,SAAS,EAAC,QAAQ;gBAElB,8BAAC,wBAAU,IAAC,QAAQ,EAAC,MAAM,GAAG,CAC1B,CACC;QACR,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AArBD,kCAqBC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Content = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const aksel_icons_1 = require("@navikt/aksel-icons");
|
|
9
|
-
const accordion_1 = require("../../accordion");
|
|
10
|
-
const copybutton_1 = require("../../copybutton");
|
|
11
|
-
const link_1 = require("../../link");
|
|
12
|
-
const list_1 = require("../../list");
|
|
13
|
-
const read_more_1 = require("../../read-more");
|
|
14
|
-
const typography_1 = require("../../typography");
|
|
15
|
-
const box_1 = require("../box");
|
|
16
|
-
const stack_1 = require("../stack");
|
|
17
|
-
const AvatarPanel_1 = require("./AvatarPanel");
|
|
18
|
-
function Content() {
|
|
19
|
-
return (react_1.default.createElement(AvatarPanel_1.AvatarPanel, null,
|
|
20
|
-
react_1.default.createElement(box_1.Box, { paddingBlock: "0 6" },
|
|
21
|
-
react_1.default.createElement(stack_1.VStack, { gap: "3", align: "start" },
|
|
22
|
-
react_1.default.createElement(typography_1.Heading, { size: "large" }, "Hvem kan f\u00E5?"),
|
|
23
|
-
react_1.default.createElement(copybutton_1.CopyButton, { copyText: "#", text: "Kopier lenke", size: "small", icon: react_1.default.createElement(aksel_icons_1.LinkIcon, { "aria-hidden": true }) }))),
|
|
24
|
-
react_1.default.createElement(typography_1.BodyLong, { weight: "semibold" }, "Har du blitt arbeidsledig eller permittert, kan du f\u00E5 dagpenger fra NAV hvis alt dette gjelder for deg:"),
|
|
25
|
-
react_1.default.createElement(list_1.List, null,
|
|
26
|
-
react_1.default.createElement(list_1.List.Item, null, "Du har mistet minst 50 prosent av den totale arbeidstiden din."),
|
|
27
|
-
react_1.default.createElement(list_1.List.Item, null, "Du har f\u00E5tt inntekten din helt eller delvis redusert."),
|
|
28
|
-
react_1.default.createElement(list_1.List.Item, null, "Du har hatt en inntekt p\u00E5 minst 177 930 kroner (1,5 G - Grunnbel\u00F8p) de siste 12 m\u00E5nedene, eller minst 355 860 kroner (3 G) de siste 36 m\u00E5nedene."),
|
|
29
|
-
react_1.default.createElement(list_1.List.Item, null, "Du er under 67 \u00E5r.")),
|
|
30
|
-
react_1.default.createElement(box_1.Box, { paddingBlock: "0 7" },
|
|
31
|
-
react_1.default.createElement(read_more_1.ReadMore, { header: "Hvilke inntekter gir rett til dagpenger?" },
|
|
32
|
-
"Vi bruker disse inntektene for \u00E5 finne ut om du har rett til dagpenger:",
|
|
33
|
-
react_1.default.createElement(list_1.List, null,
|
|
34
|
-
react_1.default.createElement(list_1.List.Item, null, "Arbeidsinntekt"),
|
|
35
|
-
react_1.default.createElement(list_1.List.Item, null, "Foreldrepenger som arbeidstaker"),
|
|
36
|
-
react_1.default.createElement(list_1.List.Item, null, "Svangerskapspenger som arbeidstaker"),
|
|
37
|
-
react_1.default.createElement(list_1.List.Item, null, "Svangerskapsrelaterte sykepenger som arbeidstaker")),
|
|
38
|
-
react_1.default.createElement(typography_1.BodyLong, null, "Inntekt som selvstendig n\u00E6ringsdrivende regnes ikke som arbeidsinntekt."))),
|
|
39
|
-
react_1.default.createElement(typography_1.BodyLong, { weight: "semibold" }, "For \u00E5 f\u00E5 dagpenger m\u00E5 du:"),
|
|
40
|
-
react_1.default.createElement(list_1.List, null,
|
|
41
|
-
react_1.default.createElement(list_1.List.Item, null, "s\u00F8ke dagpenger"),
|
|
42
|
-
react_1.default.createElement(list_1.List.Item, null, "registrere deg som arbeidss\u00F8ker"),
|
|
43
|
-
react_1.default.createElement(list_1.List.Item, null, "oppholde deg i Norge og v\u00E6re medlem av folketrygden"),
|
|
44
|
-
react_1.default.createElement(list_1.List.Item, null, "sende meldekort hver 14. dag"),
|
|
45
|
-
react_1.default.createElement(list_1.List.Item, null, "v\u00E6re reell arbeidss\u00F8ker")),
|
|
46
|
-
react_1.default.createElement(typography_1.BodyLong, { spacing: true },
|
|
47
|
-
"Les mer om ",
|
|
48
|
-
react_1.default.createElement(link_1.Link, { href: "#" }, "hva du m\u00E5 gj\u00F8re for \u00E5 f\u00E5 dagpenger.")),
|
|
49
|
-
react_1.default.createElement(box_1.Box, { paddingBlock: "0 7" },
|
|
50
|
-
react_1.default.createElement(accordion_1.Accordion, null,
|
|
51
|
-
react_1.default.createElement(accordion_1.Accordion.Item, null,
|
|
52
|
-
react_1.default.createElement(accordion_1.Accordion.Header, null, "Har du flere jobber?"),
|
|
53
|
-
react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")),
|
|
54
|
-
react_1.default.createElement(accordion_1.Accordion.Item, null,
|
|
55
|
-
react_1.default.createElement(accordion_1.Accordion.Header, null, "Oppholder du deg i utlandet?"),
|
|
56
|
-
react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")),
|
|
57
|
-
react_1.default.createElement(accordion_1.Accordion.Item, null,
|
|
58
|
-
react_1.default.createElement(accordion_1.Accordion.Header, null, "Mottar du annen pengest\u00F8tte?"),
|
|
59
|
-
react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")))),
|
|
60
|
-
react_1.default.createElement(typography_1.Heading, { spacing: true, level: "3", size: "medium" }, "Hvis du er arbeidsledig"),
|
|
61
|
-
react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "Grunnen til at du mistet jobben din kan f\u00E5 betydning for dagpengene dine. Sjekk hvilke regler som gjelder for disse situasjonene."),
|
|
62
|
-
react_1.default.createElement(typography_1.Heading, { spacing: true, level: "3", size: "medium" }, "Hvis du er permittert"),
|
|
63
|
-
react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "Som permittert har du rett til l\u00F8nn fra arbeidsgiveren din de 15 f\u00F8rste arbeidsdagene du er permittert. Hvis du er delvis permittert, kan de 15 arbeidsdagene med l\u00F8nn strekke seg over en lengre periode. Etter denne perioden med l\u00F8nn, kan du f\u00E5 dagpenger."),
|
|
64
|
-
react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "For at du skal ha rett til dagpenger som permittert, m\u00E5 permitterings\u00E5rsaken v\u00E6re mangel p\u00E5 arbeid i bedriften eller andre forhold som arbeidsgiveren din ikke kan p\u00E5virke. Grunnen til at du permitteres kan derfor ha betydning for din rett til dagpenger. NAV vurderer om permitterings\u00E5rsaken gir deg rett til dagpenger.")));
|
|
65
|
-
}
|
|
66
|
-
exports.Content = Content;
|
|
67
|
-
//# sourceMappingURL=Content.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAA+C;AAC/C,+CAA4C;AAC5C,iDAA8C;AAC9C,qCAAkC;AAClC,qCAAkC;AAClC,+CAA2C;AAC3C,iDAAqD;AACrD,gCAA6B;AAC7B,oCAAkC;AAClC,+CAA4C;AAE5C,SAAgB,OAAO;IACrB,OAAO,CACL,8BAAC,yBAAW;QACV,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO;gBAC3B,8BAAC,oBAAO,IAAC,IAAI,EAAC,OAAO,wBAAuB;gBAC5C,8BAAC,uBAAU,IACT,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,sBAAQ,0BAAe,GAC9B,CACK,CACL;QACN,8BAAC,qBAAQ,IAAC,MAAM,EAAC,UAAU,mHAGhB;QACX,8BAAC,WAAI;YACH,8BAAC,WAAI,CAAC,IAAI,yEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,qEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,+KAIE;YACZ,8BAAC,WAAI,CAAC,IAAI,kCAA+B,CACpC;QACP,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,oBAAQ,IAAC,MAAM,EAAC,0CAA0C;;gBAGzD,8BAAC,WAAI;oBACH,8BAAC,WAAI,CAAC,IAAI,yBAA2B;oBACrC,8BAAC,WAAI,CAAC,IAAI,0CAA4C;oBACtD,8BAAC,WAAI,CAAC,IAAI,8CAAgD;oBAC1D,8BAAC,WAAI,CAAC,IAAI,4DAEE,CACP;gBACP,8BAAC,qBAAQ,uFAGE,CACF,CACP;QACN,8BAAC,qBAAQ,IAAC,MAAM,EAAC,UAAU,+CAAqC;QAChE,8BAAC,WAAI;YACH,8BAAC,WAAI,CAAC,IAAI,8BAA2B;YACrC,8BAAC,WAAI,CAAC,IAAI,+CAA4C;YACtD,8BAAC,WAAI,CAAC,IAAI,mEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,uCAAyC;YACnD,8BAAC,WAAI,CAAC,IAAI,4CAAoC,CACzC;QACP,8BAAC,qBAAQ,IAAC,OAAO;;YACJ,8BAAC,WAAI,IAAC,IAAI,EAAC,GAAG,8DAA2C,CAC3D;QACX,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,qBAAS;gBACR,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,+BAAwC;oBACzD,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL;gBACjB,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,uCAAgD;oBACjE,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL;gBACjB,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,4CAAgD;oBACjE,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL,CACP,CACR;QACN,8BAAC,oBAAO,IAAC,OAAO,QAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,8BAE9B;QACV,8BAAC,qBAAQ,IAAC,OAAO,mJAGN;QACX,8BAAC,oBAAO,IAAC,OAAO,QAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,4BAE9B;QACV,8BAAC,qBAAQ,IAAC,OAAO,oSAKN;QACX,8BAAC,qBAAQ,IAAC,OAAO,yWAMN,CACC,CACf,CAAC;AACJ,CAAC;AApHD,0BAoHC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.FilterCard = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const aksel_icons_1 = require("@navikt/aksel-icons");
|
|
29
|
-
const checkbox_1 = require("../../form/checkbox");
|
|
30
|
-
const typography_1 = require("../../typography");
|
|
31
|
-
const box_1 = require("../box");
|
|
32
|
-
const stack_1 = require("../stack");
|
|
33
|
-
function FilterCard() {
|
|
34
|
-
const [filter, setFilter] = (0, react_1.useState)([]);
|
|
35
|
-
return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: { xs: "4", md: "5" }, borderWidth: "5", borderColor: "border-alt-3", borderRadius: "medium" },
|
|
36
|
-
react_1.default.createElement(stack_1.VStack, { gap: "6" },
|
|
37
|
-
react_1.default.createElement(typography_1.Heading, { size: "large" }, "Fortell oss om situasjonen din"),
|
|
38
|
-
react_1.default.createElement(typography_1.BodyLong, null, "Fortell oss litt om situasjonen din, s\u00E5 viser vi bare den informasjonen som er relevant for deg."),
|
|
39
|
-
react_1.default.createElement("div", null,
|
|
40
|
-
react_1.default.createElement(checkbox_1.CheckboxGroup, { legend: "Hva er situasjonen din?", size: "small", onChange: setFilter },
|
|
41
|
-
react_1.default.createElement(checkbox_1.Checkbox, { value: "box1" }, "Jeg er arbeidsledig"),
|
|
42
|
-
react_1.default.createElement(checkbox_1.Checkbox, { value: "box2" }, "Jeg er permittert")),
|
|
43
|
-
!filter.length && (react_1.default.createElement(box_1.Box, { paddingBlock: "2 0" },
|
|
44
|
-
react_1.default.createElement(stack_1.HStack, { gap: "2", align: "center" },
|
|
45
|
-
react_1.default.createElement(aksel_icons_1.InformationSquareIcon, { "aria-hidden": true }),
|
|
46
|
-
react_1.default.createElement(typography_1.Detail, null, "Ingen filtre er valgt, s\u00E5 alt innhold vises."))))))));
|
|
47
|
-
}
|
|
48
|
-
exports.FilterCard = FilterCard;
|
|
49
|
-
//# sourceMappingURL=Filter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Filter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,qDAA4D;AAC5D,kDAA8D;AAC9D,iDAA6D;AAC7D,gCAA6B;AAC7B,oCAA0C;AAE1C,SAAgB,UAAU;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAQ,EAAE,CAAC,CAAC;IAEhD,OAAO,CACL,8BAAC,SAAG,IACF,UAAU,EAAC,YAAY,EACvB,OAAO,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAC7B,WAAW,EAAC,GAAG,EACf,WAAW,EAAC,cAAc,EAC1B,YAAY,EAAC,QAAQ;QAErB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG;YACb,8BAAC,oBAAO,IAAC,IAAI,EAAC,OAAO,qCAAyC;YAC9D,8BAAC,qBAAQ,gHAGE;YACX;gBACE,8BAAC,wBAAa,IACZ,MAAM,EAAC,yBAAyB,EAChC,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,SAAS;oBAEnB,8BAAC,mBAAQ,IAAC,KAAK,EAAC,MAAM,0BAA+B;oBACrD,8BAAC,mBAAQ,IAAC,KAAK,EAAC,MAAM,wBAA6B,CACrC;gBACf,CAAC,MAAM,CAAC,MAAM,IAAI,CACjB,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;oBACrB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ;wBAC5B,8BAAC,mCAAqB,0BAAe;wBACrC,8BAAC,mBAAM,4DAAsD,CACtD,CACL,CACP,CACG,CACC,CACL,CACP,CAAC;AACJ,CAAC;AAtCD,gCAsCC"}
|