@helsenorge/designsystem-react 14.3.0 → 14.4.0

package/lib/CHANGELOG.md

@@ -1,4 +1,10 @@
 
+## [14.4.0](https://github.com/helsenorge/designsystem/compare/v14.3.0...v14.4.0) (2026-04-16)
+
+### Features
+
+* **chip:**  lagt til resources ([10a2b31](https://github.com/helsenorge/designsystem/commit/10a2b31b3ef5c0fcbabea5a27cad7656f1271cff)), closes [#375385](https://github.com/helsenorge/designsystem/issues/375385)
+
 ## [14.3.0](https://github.com/helsenorge/designsystem/compare/v14.2.1...v14.3.0) (2026-04-14)
 
 ### Features

package/lib/components/Chip/Chip.d.ts

@@ -1,3 +1,4 @@
+import { HNDesignsystemChip } from '../../resources/Resources';
 export interface ChipProps {
     /** Sets the text of the chip */
     children: string;
@@ -13,6 +14,8 @@ export interface ChipProps {
     closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemChip>;
 }
 declare const Chip: React.FC<ChipProps>;
 export default Chip;

package/lib/components/Chip/index.js

@@ -1,11 +1,28 @@
-import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
+import { a as IconSize, n as AnalyticsId, s as LanguageLocales } from "../../constants2.js";
 import { t as Icon_default } from "../../Icon.js";
+import { n as useLanguage } from "../../useLanguage.js";
 import { t as X_default } from "../../X.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
+var HN_Designsystem_Chip_en_GB_default = { removeAriaLabel: "Remove" };
+var HN_Designsystem_Chip_nb_NO_default = { removeAriaLabel: "Fjern" };
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Chip_en_GB_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Chip_nb_NO_default;
+	}
+};
 var Chip = (props) => {
-	const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true } = props;
+	const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const defaultResources = getResources(language);
+	const mergedResources = {
+		...defaultResources,
+		...resources,
+		removeAriaLabel: closeButtonProps?.["aria-label"] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: styles["chip"],
 		children: [/* @__PURE__ */ jsx("button", {
@@ -21,6 +38,7 @@ var Chip = (props) => {
 			})
 		}), withCloseButton && /* @__PURE__ */ jsx("button", {
 			...closeButtonProps,
+			"aria-label": mergedResources.removeAriaLabel,
 			className: classNames(styles["chip__close"]),
 			onClick: onCloseClick,
 			type: "button",

package/lib/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\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}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true } = props;\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        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          className={classNames(styles['chip__close'])}\n          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":";;;;;;AAyBA,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,SAAS;AAEnH,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,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,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS;GACT,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;;AC1DV,IAAA,eD8De"}
+{"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 { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = 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={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={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;;;ACmBb,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,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;GACT,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;GACT,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;;ACxEV,IAAA,eD4Ee"}

package/lib/components/Chip/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { HNDesignsystemChip } from '../../resources/Resources';
+import { LanguageLocales } from '../../constants';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemChip;

package/lib/resources/HN.Designsystem.Chip.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "removeAriaLabel": "Remove"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Chip.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "removeAriaLabel": "Fjern"
+}
+;
+
+export default _default;

package/lib/resources/Resources.d.ts

@@ -146,4 +146,30 @@ export type HNDesignsystemInput = {
   characters: string;
 };
 
+export type HNDesignsystemFilter = {
+  /**
+   * Finn
+   */
+  filterButtonText: string;
+  /**
+   * Sortering
+   */
+  sortLabel: string;
+  /**
+   * Nullstill
+   */
+  resetButtonText: string;
+  /**
+   * Vis ${antall} treff
+   */
+  showButtonText: string;
+};
+
+export type HNDesignsystemChip = {
+  /**
+   * Fjern
+   */
+  removeAriaLabel: string;
+};
+
 /* eslint:enable */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "14.3.0",
+  "version": "14.4.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",