@helsenorge/designsystem-react 14.0.0 → 14.2.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.
Files changed (191) hide show
  1. package/lib/AnchorLink.js +2 -2
  2. package/lib/AnchorLink.js.map +1 -1
  3. package/lib/Avatar.js +2 -2
  4. package/lib/Avatar.js.map +1 -1
  5. package/lib/Badge.js +2 -2
  6. package/lib/Badge.js.map +1 -1
  7. package/lib/Button.js +6 -6
  8. package/lib/Button.js.map +1 -1
  9. package/lib/CHANGELOG.md +245 -223
  10. package/lib/Checkbox.js +6 -6
  11. package/lib/Checkbox.js.map +1 -1
  12. package/lib/Close.js +3 -3
  13. package/lib/Close.js.map +1 -1
  14. package/lib/DictionaryTrigger.js +2 -2
  15. package/lib/DictionaryTrigger.js.map +1 -1
  16. package/lib/Drawer.js +13 -7
  17. package/lib/Drawer.js.map +1 -1
  18. package/lib/Duolist.js +5 -5
  19. package/lib/Duolist.js.map +1 -1
  20. package/lib/ElementHeader.js +9 -9
  21. package/lib/ElementHeader.js.map +1 -1
  22. package/lib/ElementHeaderText.js +4 -4
  23. package/lib/ElementHeaderText.js.map +1 -1
  24. package/lib/ErrorWrapper.js +2 -2
  25. package/lib/ErrorWrapper.js.map +1 -1
  26. package/lib/Expander.js +8 -8
  27. package/lib/Expander.js.map +1 -1
  28. package/lib/FormFieldTag.js +2 -2
  29. package/lib/FormFieldTag.js.map +1 -1
  30. package/lib/FormGroup.js +5 -5
  31. package/lib/FormGroup.js.map +1 -1
  32. package/lib/FormLayout.js +3 -3
  33. package/lib/FormLayout.js.map +1 -1
  34. package/lib/HelpDetails.js +3 -3
  35. package/lib/HelpDetails.js.map +1 -1
  36. package/lib/HelpTriggerIcon.js +2 -2
  37. package/lib/HelpTriggerIcon.js.map +1 -1
  38. package/lib/HelpTriggerStandalone.js +2 -2
  39. package/lib/HelpTriggerStandalone.js.map +1 -1
  40. package/lib/HighlightPanel.js +3 -3
  41. package/lib/HighlightPanel.js.map +1 -1
  42. package/lib/HorizontalScroll.js +4 -4
  43. package/lib/HorizontalScroll.js.map +1 -1
  44. package/lib/Icon.js +2 -2
  45. package/lib/Icon.js.map +1 -1
  46. package/lib/InfoTeaser.js +3 -3
  47. package/lib/InfoTeaser.js.map +1 -1
  48. package/lib/Input.js +4 -4
  49. package/lib/Input.js.map +1 -1
  50. package/lib/LazyIcon.js +2 -0
  51. package/lib/LazyIcon.js.map +1 -1
  52. package/lib/LinkList.js +5 -5
  53. package/lib/LinkList.js.map +1 -1
  54. package/lib/List.js +2 -2
  55. package/lib/List.js.map +1 -1
  56. package/lib/ListEditMode.js +4 -4
  57. package/lib/ListEditMode.js.map +1 -1
  58. package/lib/MaxCharacters.js +2 -2
  59. package/lib/MaxCharacters.js.map +1 -1
  60. package/lib/PanelTitle.js +2 -2
  61. package/lib/PanelTitle.js.map +1 -1
  62. package/lib/PopOver.js +2 -2
  63. package/lib/PopOver.js.map +1 -1
  64. package/lib/Select.js +4 -4
  65. package/lib/Select.js.map +1 -1
  66. package/lib/SingleSelectItem.js +3 -3
  67. package/lib/SingleSelectItem.js.map +1 -1
  68. package/lib/Slider.js +4 -4
  69. package/lib/Slider.js.map +1 -1
  70. package/lib/Spacer.js +2 -2
  71. package/lib/Spacer.js.map +1 -1
  72. package/lib/StatusDot.js +4 -4
  73. package/lib/StatusDot.js.map +1 -1
  74. package/lib/StatusDotList.js +2 -2
  75. package/lib/StatusDotList.js.map +1 -1
  76. package/lib/StepButtons.js +5 -5
  77. package/lib/StepButtons.js.map +1 -1
  78. package/lib/TabList.js +8 -8
  79. package/lib/TabList.js.map +1 -1
  80. package/lib/TabPanel.js +2 -2
  81. package/lib/TabPanel.js.map +1 -1
  82. package/lib/TableBody.js +2 -2
  83. package/lib/TableBody.js.map +1 -1
  84. package/lib/TableCell.js +2 -2
  85. package/lib/TableCell.js.map +1 -1
  86. package/lib/TableExpandedRow.js +4 -4
  87. package/lib/TableExpandedRow.js.map +1 -1
  88. package/lib/TableExpanderCell.js +2 -2
  89. package/lib/TableExpanderCell.js.map +1 -1
  90. package/lib/TableHead.js +2 -2
  91. package/lib/TableHead.js.map +1 -1
  92. package/lib/TableHeadCell.js +3 -3
  93. package/lib/TableHeadCell.js.map +1 -1
  94. package/lib/TableRow.js +3 -3
  95. package/lib/TableRow.js.map +1 -1
  96. package/lib/Textarea.js +4 -4
  97. package/lib/Textarea.js.map +1 -1
  98. package/lib/Title.js +2 -2
  99. package/lib/Title.js.map +1 -1
  100. package/lib/Toast.js +3 -3
  101. package/lib/Toast.js.map +1 -1
  102. package/lib/components/ArticleTeaser/index.js +4 -4
  103. package/lib/components/ArticleTeaser/index.js.map +1 -1
  104. package/lib/components/Chip/index.js +2 -2
  105. package/lib/components/Chip/index.js.map +1 -1
  106. package/lib/components/Dropdown/index.js +5 -5
  107. package/lib/components/Dropdown/index.js.map +1 -1
  108. package/lib/components/DropdownOld/index.js +3 -3
  109. package/lib/components/DropdownOld/index.js.map +1 -1
  110. package/lib/components/EmptyState/index.js +2 -2
  111. package/lib/components/EmptyState/index.js.map +1 -1
  112. package/lib/components/ExpanderHierarchy/index.js +7 -7
  113. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  114. package/lib/components/ExpanderList/index.js +6 -6
  115. package/lib/components/ExpanderList/index.js.map +1 -1
  116. package/lib/components/FavoriteButton/index.js +2 -2
  117. package/lib/components/FavoriteButton/index.js.map +1 -1
  118. package/lib/components/HelpBubble/index.js +3 -3
  119. package/lib/components/HelpBubble/index.js.map +1 -1
  120. package/lib/components/HelpPanel/index.js +2 -2
  121. package/lib/components/HelpPanel/index.js.map +1 -1
  122. package/lib/components/HelpTriggerInline/index.js +2 -2
  123. package/lib/components/HelpTriggerInline/index.js.map +1 -1
  124. package/lib/components/Icons/AdditionalIconInformation.d.ts +8 -0
  125. package/lib/components/Icons/AdditionalIconInformation.js +8 -0
  126. package/lib/components/Icons/AdditionalIconInformation.js.map +1 -1
  127. package/lib/components/Icons/Filter.js +27 -9
  128. package/lib/components/Icons/Filter.js.map +1 -1
  129. package/lib/components/Icons/IconNames.d.ts +1 -1
  130. package/lib/components/Icons/IconNames.js +2 -0
  131. package/lib/components/Icons/IconNames.js.map +1 -1
  132. package/lib/components/Icons/MeasuringTape.d.ts +3 -0
  133. package/lib/components/Icons/MeasuringTape.js +8 -0
  134. package/lib/components/Icons/MeasuringTape.js.map +1 -0
  135. package/lib/components/Icons/Search.js +11 -1
  136. package/lib/components/Icons/Search.js.map +1 -1
  137. package/lib/components/Icons/Sort.d.ts +3 -0
  138. package/lib/components/Icons/Sort.js +48 -0
  139. package/lib/components/Icons/Sort.js.map +1 -0
  140. package/lib/components/Loader/index.js +4 -4
  141. package/lib/components/Loader/index.js.map +1 -1
  142. package/lib/components/Modal/index.js +9 -9
  143. package/lib/components/Modal/index.js.map +1 -1
  144. package/lib/components/NotificationPanel/index.js +6 -6
  145. package/lib/components/NotificationPanel/index.js.map +1 -1
  146. package/lib/components/Panel/index.js +12 -12
  147. package/lib/components/Panel/index.js.map +1 -1
  148. package/lib/components/PanelList/index.js +3 -3
  149. package/lib/components/PanelList/index.js.map +1 -1
  150. package/lib/components/PopMenu/index.js +3 -3
  151. package/lib/components/PopMenu/index.js.map +1 -1
  152. package/lib/components/Progressbar/index.js +2 -2
  153. package/lib/components/Progressbar/index.js.map +1 -1
  154. package/lib/components/PromoPanel/index.js +2 -2
  155. package/lib/components/PromoPanel/index.js.map +1 -1
  156. package/lib/components/ServiceMessage/index.js +5 -5
  157. package/lib/components/ServiceMessage/index.js.map +1 -1
  158. package/lib/components/SharingStatus/index.js +4 -4
  159. package/lib/components/SharingStatus/index.js.map +1 -1
  160. package/lib/components/Step/index.js +2 -2
  161. package/lib/components/Step/index.js.map +1 -1
  162. package/lib/components/Stepper/index.js +2 -2
  163. package/lib/components/Stepper/index.js.map +1 -1
  164. package/lib/components/StickyNote/index.js +12 -11
  165. package/lib/components/StickyNote/index.js.map +1 -1
  166. package/lib/components/Table/index.js +2 -2
  167. package/lib/components/Table/index.js.map +1 -1
  168. package/lib/components/Tabs/index.js +4 -4
  169. package/lib/components/Tabs/index.js.map +1 -1
  170. package/lib/components/Tag/index.js +2 -2
  171. package/lib/components/Tag/index.js.map +1 -1
  172. package/lib/components/Tile/index.js +6 -5
  173. package/lib/components/Tile/index.js.map +1 -1
  174. package/lib/components/Toggle/index.js +16 -16
  175. package/lib/components/Toggle/index.js.map +1 -1
  176. package/lib/components/Toggle/styles.module.scss +4 -4
  177. package/lib/components/Validation/index.js +2 -2
  178. package/lib/components/Validation/index.js.map +1 -1
  179. package/lib/declaration.d.ts +9 -0
  180. package/lib/global.d.ts +3 -0
  181. package/lib/resources/HN.Designsystem.Drawer.en-GB.json.d.ts +2 -1
  182. package/lib/resources/HN.Designsystem.Drawer.nb-NO.json.d.ts +2 -1
  183. package/lib/resources/Resources.d.ts +149 -0
  184. package/lib/scss/bootstrap/scss/mixins/_grid.scss +2 -1
  185. package/lib/types.d.ts +1 -0
  186. package/lib/utils2.js +7 -7
  187. package/lib/utils2.js.map +1 -1
  188. package/lib/utils3.js +5 -5
  189. package/lib/utils3.js.map +1 -1
  190. package/package.json +1 -1
  191. package/scss/bootstrap/scss/mixins/_grid.scss +2 -1
package/lib/utils3.js CHANGED
@@ -6,7 +6,7 @@ import { t as useIdWithFallback } from "./useIdWithFallback.js";
6
6
  import { t as getAriaDescribedBy } from "./accessibility.js";
7
7
  import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
8
8
  import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
9
- import classNames from "classnames";
9
+ import cn from "classnames";
10
10
  import { useState } from "react";
11
11
  import { jsx } from "react/jsx-runtime";
12
12
  import radioButtonStyles from "./components/RadioButton/styles.module.scss";
@@ -21,14 +21,14 @@ const RadioButton = (props) => {
21
21
  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
22
22
  const mergedRefs = mergeRefs([ref, refObject]);
23
23
  const errorTextId = useIdWithFallback(errorTextIdProp);
24
- const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
24
+ const radioButtonWrapperClasses = cn(radioButtonStyles["radio-button-wrapper"], {
25
25
  [radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
26
26
  [radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
27
27
  [radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
28
28
  [radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
29
29
  [radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
30
30
  });
31
- const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
31
+ const radioButtonLabelClasses = cn(radioButtonStyles["radio-button-label"], {
32
32
  [radioButtonStyles["radio-button-label--disabled"]]: disabled,
33
33
  [radioButtonStyles["radio-button-label--on-dark"]]: onDark,
34
34
  [radioButtonStyles["radio-button-label--invalid"]]: invalid,
@@ -36,7 +36,7 @@ const RadioButton = (props) => {
36
36
  [radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
37
37
  [radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
38
38
  }, labelClassNames);
39
- const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
39
+ const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
40
40
  [radioButtonStyles["radio-button--on-dark"]]: onDark,
41
41
  [radioButtonStyles["radio-button--disabled"]]: disabled,
42
42
  [radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
@@ -89,7 +89,7 @@ var RadioButton_default = RadioButton;
89
89
  const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
90
90
  const onCherry = onColor === "oninvalid";
91
91
  const checked = radioId === checkedRadioId;
92
- return classNames({
92
+ return cn({
93
93
  [radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
94
94
  [radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
95
95
  [radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
package/lib/utils3.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils3.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx","../src/components/RadioButton/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n label: React.ReactNode;\n /** Adds custom classes to the label element. */\n labelClassNames?: string;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n size?: keyof typeof FormSize;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the input element */\n ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n const {\n className,\n defaultChecked,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n onColor = FormOnColor.onwhite,\n name = inputId,\n size,\n errorText,\n errorTextId: errorTextIdProp,\n error = !!errorText,\n errorWrapperClassName,\n value = getLabelText(label),\n testId,\n required,\n labelClassNames,\n ref,\n ...rest\n } = props;\n const invalid = error || onColor === FormOnColor.oninvalid;\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const onCherry = onColor === FormOnColor.oninvalid;\n const isLarge = size === FormSize.large;\n const [checked, changeChecked] = useState<boolean>();\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(\n radioButtonStyles['radio-button-label'],\n {\n [radioButtonStyles['radio-button-label--disabled']]: disabled,\n [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n [radioButtonStyles['radio-button-label--invalid']]: invalid,\n [radioButtonStyles['radio-button-label__large']]: isLarge,\n [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n },\n labelClassNames\n );\n const radioButtonClasses = classNames(\n radioButtonStyles['radio-button'],\n {\n [radioButtonStyles['radio-button--on-dark']]: onDark,\n [radioButtonStyles['radio-button--disabled']]: disabled,\n [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n [radioButtonStyles['radio-button--invalid']]: invalid,\n [radioButtonStyles['radio-button__large']]: isLarge,\n [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n },\n className\n );\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n if (onChange) onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n {...rest}\n id={inputId}\n name={name}\n className={radioButtonClasses}\n type=\"radio\"\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n defaultChecked={defaultChecked}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n required={required}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {renderLabelAsParent({\n label: label,\n children: getLabelContent(),\n inputId: inputId,\n onColor: onColor as FormOnColor,\n labelClassName: radioButtonLabelClasses,\n sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n large: isLarge,\n afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n })}\n </div>\n </ErrorWrapper>\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n","import classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport const getRadioLabelClasses = (\n radioId: string,\n onColor: FormOnColor,\n large: boolean,\n checkedRadioId?: string\n): string | undefined => {\n const onCherry = onColor === 'oninvalid';\n const checked = radioId === checkedRadioId;\n\n return classNames({\n [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n });\n};\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,WACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe;ACrJf,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,WAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC"}
1
+ {"version":3,"file":"utils3.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx","../src/components/RadioButton/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n label: React.ReactNode;\n /** Adds custom classes to the label element. */\n labelClassNames?: string;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n size?: keyof typeof FormSize;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the input element */\n ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n const {\n className,\n defaultChecked,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n onColor = FormOnColor.onwhite,\n name = inputId,\n size,\n errorText,\n errorTextId: errorTextIdProp,\n error = !!errorText,\n errorWrapperClassName,\n value = getLabelText(label),\n testId,\n required,\n labelClassNames,\n ref,\n ...rest\n } = props;\n const invalid = error || onColor === FormOnColor.oninvalid;\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const onCherry = onColor === FormOnColor.oninvalid;\n const isLarge = size === FormSize.large;\n const [checked, changeChecked] = useState<boolean>();\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(\n radioButtonStyles['radio-button-label'],\n {\n [radioButtonStyles['radio-button-label--disabled']]: disabled,\n [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n [radioButtonStyles['radio-button-label--invalid']]: invalid,\n [radioButtonStyles['radio-button-label__large']]: isLarge,\n [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n },\n labelClassNames\n );\n const radioButtonClasses = classNames(\n radioButtonStyles['radio-button'],\n {\n [radioButtonStyles['radio-button--on-dark']]: onDark,\n [radioButtonStyles['radio-button--disabled']]: disabled,\n [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n [radioButtonStyles['radio-button--invalid']]: invalid,\n [radioButtonStyles['radio-button__large']]: isLarge,\n [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n },\n className\n );\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n if (onChange) onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n {...rest}\n id={inputId}\n name={name}\n className={radioButtonClasses}\n type=\"radio\"\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n defaultChecked={defaultChecked}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n required={required}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {renderLabelAsParent({\n label: label,\n children: getLabelContent(),\n inputId: inputId,\n onColor: onColor as FormOnColor,\n labelClassName: radioButtonLabelClasses,\n sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n large: isLarge,\n afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n })}\n </div>\n </ErrorWrapper>\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n","import classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport const getRadioLabelClasses = (\n radioId: string,\n onColor: FormOnColor,\n large: boolean,\n checkedRadioId?: string\n): string | undefined => {\n const onCherry = onColor === 'oninvalid';\n const checked = radioId === checkedRadioId;\n\n return classNames({\n [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n });\n};\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,GAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,GAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,GACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe;ACrJf,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,GAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@helsenorge/designsystem-react",
3
3
  "sideEffects": false,
4
4
  "private": false,
5
- "version": "14.0.0",
5
+ "version": "14.2.0",
6
6
  "description": "The official design system for Helsenorge built with React.",
7
7
  "repository": {
8
8
  "type": "git",
@@ -28,7 +28,8 @@
28
28
  }
29
29
  }
30
30
 
31
- @include deprecate('The `make-container-max-widths` mixin', 'v4.5.2', 'v5');
31
+ // fjerner denne i vår kopi
32
+ // @include deprecate('The `make-container-max-widths` mixin', 'v4.5.2', 'v5');
32
33
  }
33
34
 
34
35
  @mixin make-col-ready($gutter: $grid-gutter-width) {