@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.
- package/lib/AnchorLink.js +2 -2
- package/lib/AnchorLink.js.map +1 -1
- package/lib/Avatar.js +2 -2
- package/lib/Avatar.js.map +1 -1
- package/lib/Badge.js +2 -2
- package/lib/Badge.js.map +1 -1
- package/lib/Button.js +6 -6
- package/lib/Button.js.map +1 -1
- package/lib/CHANGELOG.md +245 -223
- package/lib/Checkbox.js +6 -6
- package/lib/Checkbox.js.map +1 -1
- package/lib/Close.js +3 -3
- package/lib/Close.js.map +1 -1
- package/lib/DictionaryTrigger.js +2 -2
- package/lib/DictionaryTrigger.js.map +1 -1
- package/lib/Drawer.js +13 -7
- package/lib/Drawer.js.map +1 -1
- package/lib/Duolist.js +5 -5
- package/lib/Duolist.js.map +1 -1
- package/lib/ElementHeader.js +9 -9
- package/lib/ElementHeader.js.map +1 -1
- package/lib/ElementHeaderText.js +4 -4
- package/lib/ElementHeaderText.js.map +1 -1
- package/lib/ErrorWrapper.js +2 -2
- package/lib/ErrorWrapper.js.map +1 -1
- package/lib/Expander.js +8 -8
- package/lib/Expander.js.map +1 -1
- package/lib/FormFieldTag.js +2 -2
- package/lib/FormFieldTag.js.map +1 -1
- package/lib/FormGroup.js +5 -5
- package/lib/FormGroup.js.map +1 -1
- package/lib/FormLayout.js +3 -3
- package/lib/FormLayout.js.map +1 -1
- package/lib/HelpDetails.js +3 -3
- package/lib/HelpDetails.js.map +1 -1
- package/lib/HelpTriggerIcon.js +2 -2
- package/lib/HelpTriggerIcon.js.map +1 -1
- package/lib/HelpTriggerStandalone.js +2 -2
- package/lib/HelpTriggerStandalone.js.map +1 -1
- package/lib/HighlightPanel.js +3 -3
- package/lib/HighlightPanel.js.map +1 -1
- package/lib/HorizontalScroll.js +4 -4
- package/lib/HorizontalScroll.js.map +1 -1
- package/lib/Icon.js +2 -2
- package/lib/Icon.js.map +1 -1
- package/lib/InfoTeaser.js +3 -3
- package/lib/InfoTeaser.js.map +1 -1
- package/lib/Input.js +4 -4
- package/lib/Input.js.map +1 -1
- package/lib/LazyIcon.js +2 -0
- package/lib/LazyIcon.js.map +1 -1
- package/lib/LinkList.js +5 -5
- package/lib/LinkList.js.map +1 -1
- package/lib/List.js +2 -2
- package/lib/List.js.map +1 -1
- package/lib/ListEditMode.js +4 -4
- package/lib/ListEditMode.js.map +1 -1
- package/lib/MaxCharacters.js +2 -2
- package/lib/MaxCharacters.js.map +1 -1
- package/lib/PanelTitle.js +2 -2
- package/lib/PanelTitle.js.map +1 -1
- package/lib/PopOver.js +2 -2
- package/lib/PopOver.js.map +1 -1
- package/lib/Select.js +4 -4
- package/lib/Select.js.map +1 -1
- package/lib/SingleSelectItem.js +3 -3
- package/lib/SingleSelectItem.js.map +1 -1
- package/lib/Slider.js +4 -4
- package/lib/Slider.js.map +1 -1
- package/lib/Spacer.js +2 -2
- package/lib/Spacer.js.map +1 -1
- package/lib/StatusDot.js +4 -4
- package/lib/StatusDot.js.map +1 -1
- package/lib/StatusDotList.js +2 -2
- package/lib/StatusDotList.js.map +1 -1
- package/lib/StepButtons.js +5 -5
- package/lib/StepButtons.js.map +1 -1
- package/lib/TabList.js +8 -8
- package/lib/TabList.js.map +1 -1
- package/lib/TabPanel.js +2 -2
- package/lib/TabPanel.js.map +1 -1
- package/lib/TableBody.js +2 -2
- package/lib/TableBody.js.map +1 -1
- package/lib/TableCell.js +2 -2
- package/lib/TableCell.js.map +1 -1
- package/lib/TableExpandedRow.js +4 -4
- package/lib/TableExpandedRow.js.map +1 -1
- package/lib/TableExpanderCell.js +2 -2
- package/lib/TableExpanderCell.js.map +1 -1
- package/lib/TableHead.js +2 -2
- package/lib/TableHead.js.map +1 -1
- package/lib/TableHeadCell.js +3 -3
- package/lib/TableHeadCell.js.map +1 -1
- package/lib/TableRow.js +3 -3
- package/lib/TableRow.js.map +1 -1
- package/lib/Textarea.js +4 -4
- package/lib/Textarea.js.map +1 -1
- package/lib/Title.js +2 -2
- package/lib/Title.js.map +1 -1
- package/lib/Toast.js +3 -3
- package/lib/Toast.js.map +1 -1
- package/lib/components/ArticleTeaser/index.js +4 -4
- package/lib/components/ArticleTeaser/index.js.map +1 -1
- package/lib/components/Chip/index.js +2 -2
- package/lib/components/Chip/index.js.map +1 -1
- package/lib/components/Dropdown/index.js +5 -5
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/DropdownOld/index.js +3 -3
- package/lib/components/DropdownOld/index.js.map +1 -1
- package/lib/components/EmptyState/index.js +2 -2
- package/lib/components/EmptyState/index.js.map +1 -1
- package/lib/components/ExpanderHierarchy/index.js +7 -7
- package/lib/components/ExpanderHierarchy/index.js.map +1 -1
- package/lib/components/ExpanderList/index.js +6 -6
- package/lib/components/ExpanderList/index.js.map +1 -1
- package/lib/components/FavoriteButton/index.js +2 -2
- package/lib/components/FavoriteButton/index.js.map +1 -1
- package/lib/components/HelpBubble/index.js +3 -3
- package/lib/components/HelpBubble/index.js.map +1 -1
- package/lib/components/HelpPanel/index.js +2 -2
- package/lib/components/HelpPanel/index.js.map +1 -1
- package/lib/components/HelpTriggerInline/index.js +2 -2
- package/lib/components/HelpTriggerInline/index.js.map +1 -1
- package/lib/components/Icons/AdditionalIconInformation.d.ts +8 -0
- package/lib/components/Icons/AdditionalIconInformation.js +8 -0
- package/lib/components/Icons/AdditionalIconInformation.js.map +1 -1
- package/lib/components/Icons/Filter.js +27 -9
- package/lib/components/Icons/Filter.js.map +1 -1
- package/lib/components/Icons/IconNames.d.ts +1 -1
- package/lib/components/Icons/IconNames.js +2 -0
- package/lib/components/Icons/IconNames.js.map +1 -1
- package/lib/components/Icons/MeasuringTape.d.ts +3 -0
- package/lib/components/Icons/MeasuringTape.js +8 -0
- package/lib/components/Icons/MeasuringTape.js.map +1 -0
- package/lib/components/Icons/Search.js +11 -1
- package/lib/components/Icons/Search.js.map +1 -1
- package/lib/components/Icons/Sort.d.ts +3 -0
- package/lib/components/Icons/Sort.js +48 -0
- package/lib/components/Icons/Sort.js.map +1 -0
- package/lib/components/Loader/index.js +4 -4
- package/lib/components/Loader/index.js.map +1 -1
- package/lib/components/Modal/index.js +9 -9
- package/lib/components/Modal/index.js.map +1 -1
- package/lib/components/NotificationPanel/index.js +6 -6
- package/lib/components/NotificationPanel/index.js.map +1 -1
- package/lib/components/Panel/index.js +12 -12
- package/lib/components/Panel/index.js.map +1 -1
- package/lib/components/PanelList/index.js +3 -3
- package/lib/components/PanelList/index.js.map +1 -1
- package/lib/components/PopMenu/index.js +3 -3
- package/lib/components/PopMenu/index.js.map +1 -1
- package/lib/components/Progressbar/index.js +2 -2
- package/lib/components/Progressbar/index.js.map +1 -1
- package/lib/components/PromoPanel/index.js +2 -2
- package/lib/components/PromoPanel/index.js.map +1 -1
- package/lib/components/ServiceMessage/index.js +5 -5
- package/lib/components/ServiceMessage/index.js.map +1 -1
- package/lib/components/SharingStatus/index.js +4 -4
- package/lib/components/SharingStatus/index.js.map +1 -1
- package/lib/components/Step/index.js +2 -2
- package/lib/components/Step/index.js.map +1 -1
- package/lib/components/Stepper/index.js +2 -2
- package/lib/components/Stepper/index.js.map +1 -1
- package/lib/components/StickyNote/index.js +12 -11
- package/lib/components/StickyNote/index.js.map +1 -1
- package/lib/components/Table/index.js +2 -2
- package/lib/components/Table/index.js.map +1 -1
- package/lib/components/Tabs/index.js +4 -4
- package/lib/components/Tabs/index.js.map +1 -1
- package/lib/components/Tag/index.js +2 -2
- package/lib/components/Tag/index.js.map +1 -1
- package/lib/components/Tile/index.js +6 -5
- package/lib/components/Tile/index.js.map +1 -1
- package/lib/components/Toggle/index.js +16 -16
- package/lib/components/Toggle/index.js.map +1 -1
- package/lib/components/Toggle/styles.module.scss +4 -4
- package/lib/components/Validation/index.js +2 -2
- package/lib/components/Validation/index.js.map +1 -1
- package/lib/declaration.d.ts +9 -0
- package/lib/global.d.ts +3 -0
- package/lib/resources/HN.Designsystem.Drawer.en-GB.json.d.ts +2 -1
- package/lib/resources/HN.Designsystem.Drawer.nb-NO.json.d.ts +2 -1
- package/lib/resources/Resources.d.ts +149 -0
- package/lib/scss/bootstrap/scss/mixins/_grid.scss +2 -1
- package/lib/types.d.ts +1 -0
- package/lib/utils2.js +7 -7
- package/lib/utils2.js.map +1 -1
- package/lib/utils3.js +5 -5
- package/lib/utils3.js.map +1 -1
- package/package.json +1 -1
- 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
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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
|
|
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,
|
|
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
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
|
|
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) {
|