@helsenorge/designsystem-react 14.2.1 → 14.4.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 (180) 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 +27 -18
  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 +5 -5
  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/LinkList.js +5 -5
  51. package/lib/LinkList.js.map +1 -1
  52. package/lib/List.js +2 -2
  53. package/lib/List.js.map +1 -1
  54. package/lib/ListEditMode.js +4 -4
  55. package/lib/ListEditMode.js.map +1 -1
  56. package/lib/MaxCharacters.js +2 -2
  57. package/lib/MaxCharacters.js.map +1 -1
  58. package/lib/PanelTitle.js +2 -2
  59. package/lib/PanelTitle.js.map +1 -1
  60. package/lib/PopOver.js +2 -2
  61. package/lib/PopOver.js.map +1 -1
  62. package/lib/Select.js +4 -4
  63. package/lib/Select.js.map +1 -1
  64. package/lib/SingleSelectItem.js +3 -3
  65. package/lib/SingleSelectItem.js.map +1 -1
  66. package/lib/Slider.js +4 -4
  67. package/lib/Slider.js.map +1 -1
  68. package/lib/Spacer.js +2 -2
  69. package/lib/Spacer.js.map +1 -1
  70. package/lib/StatusDot.js +4 -4
  71. package/lib/StatusDot.js.map +1 -1
  72. package/lib/StatusDotList.js +2 -2
  73. package/lib/StatusDotList.js.map +1 -1
  74. package/lib/StepButtons.js +5 -5
  75. package/lib/StepButtons.js.map +1 -1
  76. package/lib/TabList.js +8 -8
  77. package/lib/TabList.js.map +1 -1
  78. package/lib/TabPanel.js +2 -2
  79. package/lib/TabPanel.js.map +1 -1
  80. package/lib/TableBody.js +2 -2
  81. package/lib/TableBody.js.map +1 -1
  82. package/lib/TableCell.js +2 -2
  83. package/lib/TableCell.js.map +1 -1
  84. package/lib/TableExpandedRow.js +4 -4
  85. package/lib/TableExpandedRow.js.map +1 -1
  86. package/lib/TableExpanderCell.js +2 -2
  87. package/lib/TableExpanderCell.js.map +1 -1
  88. package/lib/TableHead.js +2 -2
  89. package/lib/TableHead.js.map +1 -1
  90. package/lib/TableHeadCell.js +3 -3
  91. package/lib/TableHeadCell.js.map +1 -1
  92. package/lib/TableRow.js +3 -3
  93. package/lib/TableRow.js.map +1 -1
  94. package/lib/Textarea.js +4 -4
  95. package/lib/Textarea.js.map +1 -1
  96. package/lib/Title.js +2 -2
  97. package/lib/Title.js.map +1 -1
  98. package/lib/Toast.js +3 -3
  99. package/lib/Toast.js.map +1 -1
  100. package/lib/components/ArticleTeaser/index.js +4 -4
  101. package/lib/components/ArticleTeaser/index.js.map +1 -1
  102. package/lib/components/Chip/Chip.d.ts +13 -10
  103. package/lib/components/Chip/index.d.ts +0 -1
  104. package/lib/components/Chip/index.js +48 -42
  105. package/lib/components/Chip/index.js.map +1 -1
  106. package/lib/components/Chip/resourceHelper.d.ts +3 -0
  107. package/lib/components/Chip/styles.module.scss +68 -73
  108. package/lib/components/Chip/styles.module.scss.d.ts +5 -12
  109. package/lib/components/Dropdown/index.js +5 -5
  110. package/lib/components/Dropdown/index.js.map +1 -1
  111. package/lib/components/DropdownOld/index.js +3 -3
  112. package/lib/components/DropdownOld/index.js.map +1 -1
  113. package/lib/components/EmptyState/index.js +2 -2
  114. package/lib/components/EmptyState/index.js.map +1 -1
  115. package/lib/components/ExpanderHierarchy/index.js +7 -7
  116. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  117. package/lib/components/ExpanderList/index.js +6 -6
  118. package/lib/components/ExpanderList/index.js.map +1 -1
  119. package/lib/components/FavoriteButton/index.js +2 -2
  120. package/lib/components/FavoriteButton/index.js.map +1 -1
  121. package/lib/components/HelpBubble/index.js +3 -3
  122. package/lib/components/HelpBubble/index.js.map +1 -1
  123. package/lib/components/HelpPanel/index.js +2 -2
  124. package/lib/components/HelpPanel/index.js.map +1 -1
  125. package/lib/components/HelpTriggerInline/index.js +2 -2
  126. package/lib/components/HelpTriggerInline/index.js.map +1 -1
  127. package/lib/components/Icons/Undo.js +35 -1
  128. package/lib/components/Icons/Undo.js.map +1 -0
  129. package/lib/components/Loader/index.js +4 -4
  130. package/lib/components/Loader/index.js.map +1 -1
  131. package/lib/components/Modal/index.js +9 -9
  132. package/lib/components/Modal/index.js.map +1 -1
  133. package/lib/components/NotificationPanel/index.js +6 -6
  134. package/lib/components/NotificationPanel/index.js.map +1 -1
  135. package/lib/components/Panel/index.js +12 -12
  136. package/lib/components/Panel/index.js.map +1 -1
  137. package/lib/components/PanelList/index.js +3 -3
  138. package/lib/components/PanelList/index.js.map +1 -1
  139. package/lib/components/PopMenu/index.js +3 -3
  140. package/lib/components/PopMenu/index.js.map +1 -1
  141. package/lib/components/Progressbar/index.js +2 -2
  142. package/lib/components/Progressbar/index.js.map +1 -1
  143. package/lib/components/PromoPanel/index.js +2 -2
  144. package/lib/components/PromoPanel/index.js.map +1 -1
  145. package/lib/components/ServiceMessage/index.js +5 -5
  146. package/lib/components/ServiceMessage/index.js.map +1 -1
  147. package/lib/components/SharingStatus/index.js +4 -4
  148. package/lib/components/SharingStatus/index.js.map +1 -1
  149. package/lib/components/Step/index.js +2 -2
  150. package/lib/components/Step/index.js.map +1 -1
  151. package/lib/components/Stepper/index.js +2 -2
  152. package/lib/components/Stepper/index.js.map +1 -1
  153. package/lib/components/StickyNote/index.js +8 -8
  154. package/lib/components/StickyNote/index.js.map +1 -1
  155. package/lib/components/Table/index.js +2 -2
  156. package/lib/components/Table/index.js.map +1 -1
  157. package/lib/components/Tabs/index.js +4 -4
  158. package/lib/components/Tabs/index.js.map +1 -1
  159. package/lib/components/Tag/index.js +2 -2
  160. package/lib/components/Tag/index.js.map +1 -1
  161. package/lib/components/Tile/index.js +4 -4
  162. package/lib/components/Tile/index.js.map +1 -1
  163. package/lib/components/Toggle/Toggle.d.ts +1 -1
  164. package/lib/components/Toggle/index.js +24 -18
  165. package/lib/components/Toggle/index.js.map +1 -1
  166. package/lib/components/Toggle/styles.module.scss +25 -0
  167. package/lib/components/Toggle/styles.module.scss.d.ts +1 -0
  168. package/lib/components/Validation/index.js +2 -2
  169. package/lib/components/Validation/index.js.map +1 -1
  170. package/lib/resources/HN.Designsystem.Chip.en-GB.json.d.ts +6 -0
  171. package/lib/resources/HN.Designsystem.Chip.nb-NO.json.d.ts +6 -0
  172. package/lib/resources/Resources.d.ts +26 -0
  173. package/lib/utils2.js +7 -7
  174. package/lib/utils2.js.map +1 -1
  175. package/lib/utils3.js +5 -5
  176. package/lib/utils3.js.map +1 -1
  177. package/package.json +1 -1
  178. package/lib/Undo.js +0 -36
  179. package/lib/Undo.js.map +0 -1
  180. package/lib/components/Chip/constants.d.ts +0 -13
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,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"}
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"}
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.2.1",
5
+ "version": "14.4.0",
6
6
  "description": "The official design system for Helsenorge built with React.",
7
7
  "repository": {
8
8
  "type": "git",
package/lib/Undo.js DELETED
@@ -1,36 +0,0 @@
1
- import { t as getIcon } from "./utils.js";
2
- import { jsx } from "react/jsx-runtime";
3
- var Undo = ({ size, isHovered }) => {
4
- return getIcon({
5
- size,
6
- isHovered,
7
- normal: /* @__PURE__ */ jsx("path", {
8
- fillRule: "evenodd",
9
- d: "M37.976 24.195c0 7.782-6.331 14.112-14.113 14.112-6.675 0-12.49-4.74-13.825-11.27l1.273-.26c1.213 5.928 6.492 10.23 12.552 10.23 7.065 0 12.813-5.747 12.813-12.812 0-7.065-5.748-12.813-12.813-12.813-3.885 0-7.554 1.796-9.977 4.812h4.92v1.299H11.97l-.337-7.12 1.299-.061.223 4.72c2.669-3.11 6.578-4.95 10.707-4.95 7.782 0 14.113 6.33 14.113 14.113"
10
- }),
11
- normalHover: /* @__PURE__ */ jsx("path", {
12
- fillRule: "evenodd",
13
- d: "M34.02 34.213a14.132 14.132 0 01-10.002 4.125 14.03 14.03 0 01-7.743-2.317l.716-1.085c5.049 3.333 11.823 2.644 16.11-1.642 4.995-4.996 4.995-13.124 0-18.12-4.996-4.995-13.124-4.994-18.12 0-2.747 2.747-4.071 6.611-3.653 10.457l3.479-3.479.919.92-4.833 4.832-5.272-4.796.875-.962 3.496 3.181c-.313-4.087 1.15-8.153 4.07-11.072 5.502-5.502 14.455-5.503 19.958 0 5.502 5.502 5.502 14.456 0 19.958"
14
- }),
15
- xSmall: /* @__PURE__ */ jsx("path", {
16
- fillRule: "evenodd",
17
- d: "M38.21 24.195c0 7.911-6.436 14.347-14.347 14.347-6.784 0-12.696-4.82-14.055-11.457l1.732-.355c1.192 5.82 6.374 10.043 12.323 10.043 6.936 0 12.579-5.642 12.579-12.578 0-6.936-5.643-12.579-12.579-12.579-3.65 0-7.109 1.61-9.486 4.342h4.428v1.77h-7.058l-.346-7.343 1.766-.085.195 4.13a14.384 14.384 0 0110.501-4.582c7.911 0 14.347 6.436 14.347 14.347"
18
- }),
19
- xSmallHover: /* @__PURE__ */ jsx("path", {
20
- fillRule: "evenodd",
21
- d: "M34.186 34.38a14.37 14.37 0 01-10.169 4.192c-2.73 0-5.474-.772-7.87-2.355l.973-1.475c4.957 3.271 11.608 2.593 15.815-1.613 4.905-4.905 4.905-12.885 0-17.788-4.903-4.905-12.884-4.905-17.788 0-2.581 2.58-3.888 6.165-3.637 9.777l3.13-3.132 1.251 1.252-4.99 4.99-5.438-4.947 1.19-1.307 3.058 2.781a14.382 14.382 0 014.186-10.665c5.593-5.593 14.695-5.594 20.289 0 5.593 5.594 5.593 14.695 0 20.29"
22
- }),
23
- xxSmall: /* @__PURE__ */ jsx("path", {
24
- fillRule: "evenodd",
25
- d: "M38.726 24.194c0 8.196-6.668 14.864-14.864 14.864-7.028 0-13.152-4.992-14.56-11.87l2.744-.56c1.14 5.578 6.11 9.628 11.816 9.628 6.652 0 12.064-5.41 12.064-12.062 0-6.652-5.412-12.062-12.064-12.062-3.1 0-6.05 1.218-8.272 3.312h5.248v2.802h-9.516l-.004-9.89h2.802v4.624a14.893 14.893 0 0 1 9.742-3.648c8.196 0 14.864 6.666 14.864 14.862"
26
- }),
27
- xxSmallHover: /* @__PURE__ */ jsx("path", {
28
- fillRule: "evenodd",
29
- d: "M32.733 36.266a14.834 14.834 0 0 1-8.726 2.824 14.835 14.835 0 0 1-10.028-3.876l1.89-2.066c4.198 3.844 10.6 4.204 15.22.852 5.382-3.906 6.584-11.464 2.678-16.848a11.986 11.986 0 0 0-7.87-4.826c-3.184-.51-6.37.258-8.978 2.15-2.51 1.822-4.184 4.54-4.75 7.54l4.248-3.082 1.644 2.266-7.702 5.59-5.812-8.002 2.266-1.646 2.718 3.744a14.89 14.89 0 0 1 5.744-8.676c6.63-4.816 15.944-3.336 20.756 3.298 4.814 6.634 3.334 15.944-3.298 20.758"
30
- })
31
- });
32
- };
33
- var Undo_default = Undo;
34
- export { Undo_default as t };
35
-
36
- //# sourceMappingURL=Undo.js.map
package/lib/Undo.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Undo.js","names":["Undo: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Undo.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst Undo: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fillRule={'evenodd'}\n d=\"M37.976 24.195c0 7.782-6.331 14.112-14.113 14.112-6.675 0-12.49-4.74-13.825-11.27l1.273-.26c1.213 5.928 6.492 10.23 12.552 10.23 7.065 0 12.813-5.747 12.813-12.812 0-7.065-5.748-12.813-12.813-12.813-3.885 0-7.554 1.796-9.977 4.812h4.92v1.299H11.97l-.337-7.12 1.299-.061.223 4.72c2.669-3.11 6.578-4.95 10.707-4.95 7.782 0 14.113 6.33 14.113 14.113\"\n />\n );\n\n const normalHover = (\n <path\n fillRule={'evenodd'}\n d=\"M34.02 34.213a14.132 14.132 0 01-10.002 4.125 14.03 14.03 0 01-7.743-2.317l.716-1.085c5.049 3.333 11.823 2.644 16.11-1.642 4.995-4.996 4.995-13.124 0-18.12-4.996-4.995-13.124-4.994-18.12 0-2.747 2.747-4.071 6.611-3.653 10.457l3.479-3.479.919.92-4.833 4.832-5.272-4.796.875-.962 3.496 3.181c-.313-4.087 1.15-8.153 4.07-11.072 5.502-5.502 14.455-5.503 19.958 0 5.502 5.502 5.502 14.456 0 19.958\"\n />\n );\n\n const xSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M38.21 24.195c0 7.911-6.436 14.347-14.347 14.347-6.784 0-12.696-4.82-14.055-11.457l1.732-.355c1.192 5.82 6.374 10.043 12.323 10.043 6.936 0 12.579-5.642 12.579-12.578 0-6.936-5.643-12.579-12.579-12.579-3.65 0-7.109 1.61-9.486 4.342h4.428v1.77h-7.058l-.346-7.343 1.766-.085.195 4.13a14.384 14.384 0 0110.501-4.582c7.911 0 14.347 6.436 14.347 14.347\"\n />\n );\n\n const xSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M34.186 34.38a14.37 14.37 0 01-10.169 4.192c-2.73 0-5.474-.772-7.87-2.355l.973-1.475c4.957 3.271 11.608 2.593 15.815-1.613 4.905-4.905 4.905-12.885 0-17.788-4.903-4.905-12.884-4.905-17.788 0-2.581 2.58-3.888 6.165-3.637 9.777l3.13-3.132 1.251 1.252-4.99 4.99-5.438-4.947 1.19-1.307 3.058 2.781a14.382 14.382 0 014.186-10.665c5.593-5.593 14.695-5.594 20.289 0 5.593 5.594 5.593 14.695 0 20.29\"\n />\n );\n\n const xxSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M38.726 24.194c0 8.196-6.668 14.864-14.864 14.864-7.028 0-13.152-4.992-14.56-11.87l2.744-.56c1.14 5.578 6.11 9.628 11.816 9.628 6.652 0 12.064-5.41 12.064-12.062 0-6.652-5.412-12.062-12.064-12.062-3.1 0-6.05 1.218-8.272 3.312h5.248v2.802h-9.516l-.004-9.89h2.802v4.624a14.893 14.893 0 0 1 9.742-3.648c8.196 0 14.864 6.666 14.864 14.862\"\n ></path>\n );\n\n const xxSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M32.733 36.266a14.834 14.834 0 0 1-8.726 2.824 14.835 14.835 0 0 1-10.028-3.876l1.89-2.066c4.198 3.844 10.6 4.204 15.22.852 5.382-3.906 6.584-11.464 2.678-16.848a11.986 11.986 0 0 0-7.87-4.826c-3.184-.51-6.37.258-8.978 2.15-2.51 1.822-4.184 4.54-4.75 7.54l4.248-3.082 1.644 2.266-7.702 5.59-5.812-8.002 2.266-1.646 2.718 3.744a14.89 14.89 0 0 1 5.744-8.676c6.63-4.816 15.944-3.336 20.756 3.298 4.814 6.634 3.334 15.944-3.298 20.758\"\n ></path>\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default Undo;\n"],"mappings":";;AAIA,IAAMA,QAAgC,EAAE,MAAM,gBAAkD;AA2C9F,QAAO,QAAQ;EAAE;EAAM;EAAW,QAzChC,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAsCsC,aAlCxC,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EA+BmD,QA3BrD,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAwB2D,aApB7D,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAiBwE,SAb1E,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACI;EAU2E,cANnF,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACI;EAGyF,CAAC;;AAGtG,IAAA,eAAe"}
@@ -1,13 +0,0 @@
1
- export declare enum ChipSize {
2
- medium = "medium",
3
- large = "large"
4
- }
5
- export declare enum ChipAction {
6
- remove = "remove",
7
- undo = "undo"
8
- }
9
- export declare enum ChipVariant {
10
- normal = "normal",
11
- oncolor = "oncolor",
12
- emphasised = "emphasised"
13
- }