@helsenorge/designsystem-react 14.4.0 → 14.5.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/lib/CHANGELOG.md +17 -0
- package/lib/Drawer.js +4 -4
- package/lib/Drawer.js.map +1 -1
- package/lib/components/Chip/Chip.d.ts +2 -0
- package/lib/components/Chip/index.js +3 -3
- package/lib/components/Chip/index.js.map +1 -1
- package/lib/components/Chip/styles.module.scss +14 -9
- package/lib/components/Tag/styles.module.scss +7 -7
- package/lib/resources/HN.Designsystem.Drawer.en-GB.json.d.ts +2 -2
- package/lib/resources/HN.Designsystem.Drawer.nb-NO.json.d.ts +2 -2
- package/lib/resources/Resources.d.ts +22 -6
- package/package.json +1 -1
package/lib/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
|
|
2
|
+
## [14.5.0](https://github.com/helsenorge/designsystem/compare/v14.4.1...v14.5.0) (2026-04-24)
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **tag:** visuelle endringer for tag for å skille mer fra chip ([f37379b](https://github.com/helsenorge/designsystem/commit/f37379b0921efc80e5f32e954b31119b7ee45ce4)), closes [#376269](https://github.com/helsenorge/designsystem/issues/376269)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **chip:** legger til tekstwrapping ([70e360b](https://github.com/helsenorge/designsystem/commit/70e360b427123e5f430c67b6f9f2bfbccd666106)), closes [#375560](https://github.com/helsenorge/designsystem/issues/375560)
|
|
11
|
+
* **chip:** onclose midlertidig tilbake til neste major ([5e1dca5](https://github.com/helsenorge/designsystem/commit/5e1dca5cf43e063bd8edc4fb72035d9aa7ba11d8)), closes [#376455](https://github.com/helsenorge/designsystem/issues/376455)
|
|
12
|
+
|
|
13
|
+
## [14.4.1](https://github.com/helsenorge/designsystem/compare/v14.4.0...v14.4.1) (2026-04-20)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **datepicker:** bugfixes fra arbeid med filter ([fe2663c](https://github.com/helsenorge/designsystem/commit/fe2663c2e70536f055554b3660f9103a05563264)), closes [#373156](https://github.com/helsenorge/designsystem/issues/373156)
|
|
18
|
+
|
|
2
19
|
## [14.4.0](https://github.com/helsenorge/designsystem/compare/v14.3.0...v14.4.0) (2026-04-16)
|
|
3
20
|
|
|
4
21
|
### Features
|
package/lib/Drawer.js
CHANGED
|
@@ -18,12 +18,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
18
18
|
import { AnimatePresence, useAnimate, usePresence } from "motion/react";
|
|
19
19
|
import styles from "./components/Drawer/styles.module.scss";
|
|
20
20
|
var HN_Designsystem_Drawer_en_GB_default = {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
ariaLabelBackButton: "Go back",
|
|
22
|
+
ariaLabelCloseBtn: "Close"
|
|
23
23
|
};
|
|
24
24
|
var HN_Designsystem_Drawer_nb_NO_default = {
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
ariaLabelBackButton: "Gå tilbake",
|
|
26
|
+
ariaLabelCloseBtn: "Lukk"
|
|
27
27
|
};
|
|
28
28
|
const getResources = (language) => {
|
|
29
29
|
switch (language) {
|
package/lib/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelCloseBtn\": \"Close\",\n \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Lukk\",\n \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /** Opens and closes the drawer */\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /** Sets the aria-label of the drawer */\n ariaLabel?: string;\n /** Sets the aria-labelledby of the drawer */\n ariaLabelledBy?: string;\n /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n closeColor?: 'blueberry' | 'plum';\n /** Direction of the drawer on desktop. Default: left */\n desktopDirection?: DesktopDirections;\n /** Sets the style of the Drawer header */\n headerClasses?: string;\n /** Title to display in the header of the drawer */\n title: string;\n /** id of the drawer title */\n titleId?: string;\n /** Changes the underlying element of the title. Default: h3 */\n titleHtmlMarkup?: TitleTags;\n /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n onRequestClose?: () => void;\n /** Optional footer content that can be rendered instead of default CTA(s) */\n footerContent?: React.ReactNode;\n /** Main content of the drawer */\n children?: React.ReactNode;\n /** Hides the close button */\n noCloseButton?: boolean;\n /** Primary CTA callback */\n onPrimaryAction?: () => void;\n /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n primaryActionText?: string;\n /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n secondaryActionText?: string;\n /** Secondary CTA callback */\n onSecondaryAction?: () => void;\n /** Customize the z-index of the drawer */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDrawer>;\n /** Sets mobile styling and animation from outer level Drawer */\n isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses);\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current || !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current || !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title\n id={ariaLabelAttributes?.['aria-labelledby']}\n className={styles['drawer__header__title']}\n htmlMarkup={titleHtmlMarkup}\n appearance=\"title3\"\n >\n {title}\n </Title>\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={styles.drawer__content}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelBackButton\": \"Go back\",\n \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n \"ariaLabelBackButton\": \"Gå tilbake\",\n \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /** Opens and closes the drawer */\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /** Sets the aria-label of the drawer */\n ariaLabel?: string;\n /** Sets the aria-labelledby of the drawer */\n ariaLabelledBy?: string;\n /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n closeColor?: 'blueberry' | 'plum';\n /** Direction of the drawer on desktop. Default: left */\n desktopDirection?: DesktopDirections;\n /** Sets the style of the Drawer header */\n headerClasses?: string;\n /** Title to display in the header of the drawer */\n title: string;\n /** id of the drawer title */\n titleId?: string;\n /** Changes the underlying element of the title. Default: h3 */\n titleHtmlMarkup?: TitleTags;\n /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n onRequestClose?: () => void;\n /** Optional footer content that can be rendered instead of default CTA(s) */\n footerContent?: React.ReactNode;\n /** Main content of the drawer */\n children?: React.ReactNode;\n /** Hides the close button */\n noCloseButton?: boolean;\n /** Primary CTA callback */\n onPrimaryAction?: () => void;\n /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n primaryActionText?: string;\n /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n secondaryActionText?: string;\n /** Secondary CTA callback */\n onSecondaryAction?: () => void;\n /** Customize the z-index of the drawer */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDrawer>;\n /** Sets mobile styling and animation from outer level Drawer */\n isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses);\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current || !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current || !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title\n id={ariaLabelAttributes?.['aria-labelledby']}\n className={styles['drawer__header__title']}\n htmlMarkup={titleHtmlMarkup}\n appearance=\"title3\"\n >\n {title}\n </Title>\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={styles.drawer__content}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { HNDesignsystemChip } from '../../resources/Resources';
|
|
2
2
|
export interface ChipProps {
|
|
3
|
+
/** @deprecated Called when action is set and the chip is clicked on. action must also be set. */
|
|
4
|
+
onClick?: () => void;
|
|
3
5
|
/** Sets the text of the chip */
|
|
4
6
|
children: string;
|
|
5
7
|
/** Wether or not to have a close button */
|
|
@@ -15,7 +15,7 @@ const getResources = (language) => {
|
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
var Chip = (props) => {
|
|
18
|
-
const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
|
|
18
|
+
const { onClick, children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
|
|
19
19
|
const { language } = useLanguage(LanguageLocales.NORWEGIAN);
|
|
20
20
|
const defaultResources = getResources(language);
|
|
21
21
|
const mergedResources = {
|
|
@@ -28,7 +28,7 @@ var Chip = (props) => {
|
|
|
28
28
|
children: [/* @__PURE__ */ jsx("button", {
|
|
29
29
|
...chipButtonProps,
|
|
30
30
|
className: classNames(styles["chip__chip"]),
|
|
31
|
-
onClick: onChipClick,
|
|
31
|
+
onClick: onClick ? onClick : onChipClick,
|
|
32
32
|
type: "button",
|
|
33
33
|
"data-testid": testId,
|
|
34
34
|
"data-analyticsid": AnalyticsId.Tag,
|
|
@@ -40,7 +40,7 @@ var Chip = (props) => {
|
|
|
40
40
|
...closeButtonProps,
|
|
41
41
|
"aria-label": mergedResources.removeAriaLabel,
|
|
42
42
|
className: classNames(styles["chip__close"]),
|
|
43
|
-
onClick: onCloseClick,
|
|
43
|
+
onClick: onClick ? onClick : onCloseClick,
|
|
44
44
|
type: "button",
|
|
45
45
|
"data-testid": `${testId}-close`,
|
|
46
46
|
"data-analyticsid": AnalyticsId.Tag,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>","mergedResources: HNDesignsystemChip"],"sources":["../../../src/resources/HN.Designsystem.Chip.en-GB.json","../../../src/resources/HN.Designsystem.Chip.nb-NO.json","../../../src/components/Chip/resourceHelper.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["{\n \"removeAriaLabel\": \"Remove\"\n}\n","{\n \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n /** Sets the text of the chip */\n children: string;\n /** Wether or not to have a close button */\n withCloseButton?: boolean;\n /** onClick handler for text-part of the chip */\n onChipClick?: () => void;\n /** Button props for main chip button */\n chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** onClick handler for close button */\n onCloseClick?: () => void;\n /** Button props for the close button */\n closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n const {
|
|
1
|
+
{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>","mergedResources: HNDesignsystemChip"],"sources":["../../../src/resources/HN.Designsystem.Chip.en-GB.json","../../../src/resources/HN.Designsystem.Chip.nb-NO.json","../../../src/components/Chip/resourceHelper.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["{\n \"removeAriaLabel\": \"Remove\"\n}\n","{\n \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n /** @deprecated Called when action is set and the chip is clicked on. action must also be set. */\n onClick?: () => void;\n /** Sets the text of the chip */\n children: string;\n /** Wether or not to have a close button */\n withCloseButton?: boolean;\n /** onClick handler for text-part of the chip */\n onChipClick?: () => void;\n /** Button props for main chip button */\n chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** onClick handler for close button */\n onCloseClick?: () => void;\n /** Button props for the close button */\n closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n const {\n onClick,\n children,\n onChipClick,\n onCloseClick,\n chipButtonProps,\n closeButtonProps,\n testId,\n withCloseButton = true,\n resources,\n } = props;\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemChip = {\n ...defaultResources,\n ...resources,\n removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n };\n\n return (\n <div className={styles['chip']}>\n <button\n {...chipButtonProps}\n className={classNames(styles['chip__chip'])}\n onClick={onClick ? onClick : onChipClick}\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tag}\n >\n <span\n className={classNames(styles['chip__chip__inner'], {\n [styles['chip__chip__inner--without-close']]: !withCloseButton,\n })}\n >\n {children}\n </span>\n </button>\n {withCloseButton && (\n <button\n {...closeButtonProps}\n aria-label={mergedResources.removeAriaLabel}\n className={classNames(styles['chip__close'])}\n onClick={onClick ? onClick : onCloseClick}\n type=\"button\"\n data-testid={`${testId}-close`}\n data-analyticsid={AnalyticsId.Tag}\n >\n <span className={styles['chip__close__inner']}>\n <Icon svgIcon={X} size={IconSize.XXSmall} />\n </span>\n </button>\n )}\n </div>\n );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACqBb,IAAMA,QAA4B,UAAS;CACzC,MAAM,EACJ,SACA,UACA,aACA,cACA,iBACA,kBACA,QACA,kBAAkB,MAClB,cACE;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;EAC3H;AAED,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IACC,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;KACI;IACA,EACR,mBACC,oBAAC,UAAA;GACC,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IAAK,WAAW,OAAO;cACtB,oBAAC,cAAA;KAAK,SAAS;KAAG,MAAM,SAAS;MAAW;KACvC;IACA,CAAA;GAEP;;ACpFV,IAAA,eDwFe"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
.chip {
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-flow: row nowrap;
|
|
8
|
-
height: 2.75rem;
|
|
8
|
+
min-height: 2.75rem;
|
|
9
9
|
|
|
10
10
|
.chip__chip:focus-visible,
|
|
11
11
|
.chip__close:focus-visible {
|
|
@@ -14,24 +14,27 @@
|
|
|
14
14
|
|
|
15
15
|
&__chip,
|
|
16
16
|
&__close {
|
|
17
|
-
height: 2.75rem;
|
|
17
|
+
min-height: 2.75rem;
|
|
18
18
|
background-color: transparent;
|
|
19
|
-
|
|
20
|
-
padding: 0;
|
|
19
|
+
padding: 0.625rem 0;
|
|
21
20
|
border: unset;
|
|
22
21
|
outline: unset;
|
|
23
22
|
cursor: pointer;
|
|
24
23
|
|
|
24
|
+
@media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
|
|
25
|
+
padding: 0.5rem 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
25
28
|
&__inner {
|
|
26
29
|
display: block;
|
|
27
30
|
box-sizing: border-box;
|
|
28
|
-
height: 1.
|
|
31
|
+
min-height: 1.375rem;
|
|
29
32
|
line-height: 1.25rem;
|
|
30
33
|
background-color: var(--core-color-blueberry-50);
|
|
31
34
|
border: 1px solid var(--core-color-blueberry-500);
|
|
32
35
|
|
|
33
36
|
@media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
|
|
34
|
-
height: 1.
|
|
37
|
+
min-height: 1.75rem;
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
.chip__chip:hover &,
|
|
@@ -56,15 +59,14 @@
|
|
|
56
59
|
border-radius: 100px 0 0 100px;
|
|
57
60
|
padding-right: 0.375rem;
|
|
58
61
|
padding-left: 0.75rem;
|
|
59
|
-
padding-top: 0.
|
|
62
|
+
padding-top: 0.125rem;
|
|
60
63
|
text-transform: uppercase;
|
|
61
64
|
font-size: 0.875rem;
|
|
62
65
|
font-weight: 600;
|
|
63
66
|
color: var(--core-color-blueberry-800);
|
|
64
|
-
text-wrap: nowrap;
|
|
65
67
|
|
|
66
68
|
@media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
|
|
67
|
-
padding-top: 0.
|
|
69
|
+
padding-top: 0.25rem;
|
|
68
70
|
font-size: 1rem;
|
|
69
71
|
}
|
|
70
72
|
|
|
@@ -82,8 +84,11 @@
|
|
|
82
84
|
padding-right: 0.25rem;
|
|
83
85
|
display: flex;
|
|
84
86
|
align-items: center;
|
|
87
|
+
height: 100%;
|
|
88
|
+
width: 1.75rem;
|
|
85
89
|
|
|
86
90
|
svg {
|
|
91
|
+
position: absolute;
|
|
87
92
|
fill: var(--color-action-graphics-onlight);
|
|
88
93
|
}
|
|
89
94
|
}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
font-size: 0.875rem;
|
|
19
19
|
line-height: 1.125rem;
|
|
20
20
|
font-weight: 600;
|
|
21
|
-
border-radius:
|
|
21
|
+
border-radius: 4px;
|
|
22
22
|
|
|
23
23
|
$colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';
|
|
24
24
|
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
&--#{$color}[type='button'] {
|
|
29
29
|
// banana og kiwi har unntak fra hovedregelen
|
|
30
30
|
@if $color == 'banana' {
|
|
31
|
-
color: map.get(palette.$palette-map, #{$color}
|
|
32
|
-
border-color: map.get(palette.$palette-map, #{$color}
|
|
31
|
+
color: map.get(palette.$palette-map, #{$color}800);
|
|
32
|
+
border-color: map.get(palette.$palette-map, #{$color}700);
|
|
33
33
|
} @else if $color == 'kiwi' {
|
|
34
34
|
color: map.get(palette.$palette-map, #{$color}900);
|
|
35
|
-
border-color: map.get(palette.$palette-map, #{$color}
|
|
35
|
+
border-color: map.get(palette.$palette-map, #{$color}700);
|
|
36
36
|
} @else {
|
|
37
37
|
color: map.get(palette.$palette-map, #{$color}800);
|
|
38
|
-
border-color: map.get(palette.$palette-map, #{$color}
|
|
38
|
+
border-color: map.get(palette.$palette-map, #{$color}800);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
&#{$tag}--emphasised {
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&--medium {
|
|
48
|
-
padding: 0 spacers.getSpacer(
|
|
48
|
+
padding: 0 spacers.getSpacer(2xs);
|
|
49
49
|
min-height: 1.625rem;
|
|
50
50
|
|
|
51
51
|
&#{$tag}--has-icon {
|
|
52
|
-
padding: 0 spacers.getSpacer(
|
|
52
|
+
padding: 0 spacers.getSpacer(2xs) 0 0.375rem;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
#{$tag}__icon {
|
|
@@ -84,14 +84,14 @@ export type HNDesignsystemTabs = {
|
|
|
84
84
|
};
|
|
85
85
|
|
|
86
86
|
export type HNDesignsystemDrawer = {
|
|
87
|
-
/**
|
|
88
|
-
* Lukk
|
|
89
|
-
*/
|
|
90
|
-
ariaLabelCloseBtn: string;
|
|
91
87
|
/**
|
|
92
88
|
* Gå tilbake
|
|
93
89
|
*/
|
|
94
90
|
ariaLabelBackButton: string;
|
|
91
|
+
/**
|
|
92
|
+
* Lukk
|
|
93
|
+
*/
|
|
94
|
+
ariaLabelCloseBtn: string;
|
|
95
95
|
};
|
|
96
96
|
|
|
97
97
|
export type HNDesignsystemFormFieldTag = {
|
|
@@ -148,7 +148,7 @@ export type HNDesignsystemInput = {
|
|
|
148
148
|
|
|
149
149
|
export type HNDesignsystemFilter = {
|
|
150
150
|
/**
|
|
151
|
-
* Finn
|
|
151
|
+
* Finn...
|
|
152
152
|
*/
|
|
153
153
|
filterButtonText: string;
|
|
154
154
|
/**
|
|
@@ -160,9 +160,25 @@ export type HNDesignsystemFilter = {
|
|
|
160
160
|
*/
|
|
161
161
|
resetButtonText: string;
|
|
162
162
|
/**
|
|
163
|
-
* Vis
|
|
163
|
+
* Vis {0} treff
|
|
164
164
|
*/
|
|
165
165
|
showButtonText: string;
|
|
166
|
+
/**
|
|
167
|
+
* Finn...
|
|
168
|
+
*/
|
|
169
|
+
filterOverviewTitle: string;
|
|
170
|
+
/**
|
|
171
|
+
* Søk i listen
|
|
172
|
+
*/
|
|
173
|
+
searchPlaceholder: string;
|
|
174
|
+
/**
|
|
175
|
+
* Nullstill
|
|
176
|
+
*/
|
|
177
|
+
searchClearButtonAriaLabel: string;
|
|
178
|
+
/**
|
|
179
|
+
* Søk
|
|
180
|
+
*/
|
|
181
|
+
searchButtonAriaLabel: string;
|
|
166
182
|
};
|
|
167
183
|
|
|
168
184
|
export type HNDesignsystemChip = {
|
package/package.json
CHANGED