@sb1/ffe-form-react 100.12.4 → 101.0.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/es/BaseRadioButton.js +7 -30
- package/es/Checkbox.js +6 -29
- package/es/Input.js +2 -25
- package/es/InputGroup.js +17 -40
- package/es/InputTextLike.js +2 -25
- package/es/Label.js +3 -28
- package/es/PhoneNumber.js +20 -32
- package/es/RadioBlock.js +7 -30
- package/es/RadioButton.js +3 -26
- package/es/RadioButtonInputGroup.js +7 -30
- package/es/RadioSwitch.js +6 -29
- package/es/TextArea.js +2 -25
- package/es/TextField.js +2 -25
- package/es/ToggleSwitch.js +5 -28
- package/es/Tooltip.js +9 -21
- package/es/documentation/RadioButton-example.js +12 -23
- package/es/documentation/RadioSwitch-example.js +4 -15
- package/es/i18n/i18n.js +3 -3
- package/es/message/BaseFieldMessage.js +7 -29
- package/es/message/ErrorFieldMessage.js +2 -25
- package/es/message/InfoFieldMessage.js +2 -25
- package/es/message/SuccessFieldMessage.js +2 -25
- package/lib/BaseRadioButton.js +10 -33
- package/lib/Checkbox.js +8 -31
- package/lib/Input.js +4 -27
- package/lib/InputGroup.js +22 -45
- package/lib/InputTextLike.js +4 -27
- package/lib/Label.js +5 -30
- package/lib/PhoneNumber.js +24 -36
- package/lib/RadioBlock.js +9 -32
- package/lib/RadioButton.js +6 -29
- package/lib/RadioButtonInputGroup.js +11 -34
- package/lib/RadioSwitch.js +9 -32
- package/lib/TextArea.js +4 -27
- package/lib/TextField.js +4 -27
- package/lib/ToggleSwitch.js +8 -31
- package/lib/Tooltip.js +13 -25
- package/lib/documentation/RadioButton-example.js +15 -26
- package/lib/documentation/RadioSwitch-example.js +7 -18
- package/lib/i18n/i18n.js +3 -3
- package/lib/message/BaseFieldMessage.js +10 -32
- package/lib/message/ErrorFieldMessage.js +4 -27
- package/lib/message/InfoFieldMessage.js +4 -27
- package/lib/message/SuccessFieldMessage.js +4 -27
- package/package.json +8 -8
package/es/TextField.js
CHANGED
|
@@ -1,31 +1,8 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
var className = _a.className, inline = _a.inline, textRightAlign = _a.textRightAlign, prefix = _a.prefix, suffix = _a.suffix, rest = __rest(_a, ["className", "inline", "textRightAlign", "prefix", "suffix"]);
|
|
3
|
+
export const TextField = React.forwardRef(({ className, inline, textRightAlign, prefix, suffix, ...rest }, ref) => {
|
|
27
4
|
return (React.createElement("div", { className: classNames('ffe-text-field__wrapper', 'ffe-default-mode', { 'ffe-text-field__wrapper--inline': inline }, className) },
|
|
28
5
|
prefix && (React.createElement("div", { className: "ffe-text-field__prefix" }, prefix)),
|
|
29
|
-
React.createElement("input",
|
|
6
|
+
React.createElement("input", { className: classNames('ffe-text-field', 'ffe-default-mode', { 'ffe-text-field--text-right-align': textRightAlign }), ref: ref, ...rest }),
|
|
30
7
|
suffix && (React.createElement("div", { className: "ffe-text-field__suffix" }, suffix))));
|
|
31
8
|
});
|
package/es/ToggleSwitch.js
CHANGED
|
@@ -1,35 +1,12 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import i18n from './i18n/i18n';
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var text = i18n[locale];
|
|
4
|
+
export const ToggleSwitch = ({ children, className, description, hideOnOff, onText, offText, id: providedId, value = 'on', locale = 'nb', checked, ...rest }) => {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const id = providedId !== null && providedId !== void 0 ? providedId : generatedId;
|
|
7
|
+
const text = i18n[locale];
|
|
31
8
|
return (React.createElement("div", { className: classNames('ffe-toggle-switch', { 'ffe-toggle-switch--hide-on-off': hideOnOff }, className) },
|
|
32
|
-
React.createElement("input",
|
|
9
|
+
React.createElement("input", { className: "ffe-toggle-switch__input", type: "checkbox", role: "switch", id: id, value: value, checked: !!checked, ...rest }),
|
|
33
10
|
React.createElement("label", { className: "ffe-toggle-switch__label", htmlFor: id },
|
|
34
11
|
React.createElement("span", { className: "ffe-toggle-switch__label-text" },
|
|
35
12
|
children,
|
package/es/Tooltip.js
CHANGED
|
@@ -1,33 +1,21 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React, { useState, useId } from 'react';
|
|
13
2
|
import classNames from 'classnames';
|
|
14
3
|
import { Collapse } from '@sb1/ffe-collapse-react';
|
|
15
4
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
setIsOpen(function (prev) { return !prev; });
|
|
5
|
+
export const Tooltip = React.forwardRef(({ isOpen: initialIsOpen, 'aria-controls': ariaControls, 'aria-label': ariaLabel = 'Vis hjelpetekst', children, className, onClick, tabIndex, containerProps, }, ref) => {
|
|
6
|
+
const tooltipButtonId = useId();
|
|
7
|
+
const tooltipId = useId();
|
|
8
|
+
const [isOpen, setIsOpen] = useState(!!initialIsOpen);
|
|
9
|
+
const handleClick = (evt) => {
|
|
10
|
+
setIsOpen(prev => !prev);
|
|
23
11
|
if (onClick) {
|
|
24
12
|
onClick(evt);
|
|
25
13
|
}
|
|
26
14
|
};
|
|
27
|
-
|
|
28
|
-
return (React.createElement("div",
|
|
15
|
+
const helpIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIj48cGF0aCBkPSJNNDgwLTI0MHEyMCAwIDM0LTE0dDE0LTM0cTAtMjAtMTQtMzR0LTM0LTE0cS0yMCAwLTM0IDE0dC0xNCAzNHEwIDIwIDE0IDM0dDM0IDE0Wm0tMzYtMTUzaDczcTAtMzcgNi41LTUyLjVUNTU1LTQ4NXEzNS0zNCA0OC41LTU4dDEzLjUtNTNxMC01NS0zNy41LTg5LjVUNDg0LTcyMHEtNTEgMC04OC41IDI3VDM0My02MjBsNjUgMjdxOS0yOCAyOC41LTQzLjVUNDgyLTY1MnEyOCAwIDQ2IDE2dDE4IDQycTAgMjMtMTUuNSA0MVQ0OTYtNTE4cS0zNSAzMi00My41IDUyLjVUNDQ0LTM5M1ptMzYgMjk3cS03OSAwLTE0OS0zMHQtMTIyLjUtODIuNVExNTYtMjYxIDEyNi0zMzFUOTYtNDgwcTAtODAgMzAtMTQ5LjV0ODIuNS0xMjJRMjYxLTgwNCAzMzEtODM0dDE0OS0zMHE4MCAwIDE0OS41IDMwdDEyMiA4Mi41UTgwNC02OTkgODM0LTYyOS41VDg2NC00ODBxMCA3OS0zMCAxNDl0LTgyLjUgMTIyLjVRNjk5LTE1NiA2MjkuNS0xMjZUNDgwLTk2Wm0wLTcycTEzMCAwIDIyMS05MXQ5MS0yMjFxMC0xMzAtOTEtMjIxdC0yMjEtOTFxLTEzMCAwLTIyMSA5MXQtOTEgMjIxcTAgMTMwIDkxIDIyMXQyMjEgOTFabTAtMzEyWiIvPjwvc3ZnPg==';
|
|
16
|
+
return (React.createElement("div", { ...containerProps, className: classNames('ffe-tooltip', {
|
|
29
17
|
'ffe-tooltip--open': isOpen,
|
|
30
|
-
}) }
|
|
18
|
+
}) },
|
|
31
19
|
React.createElement("button", { ref: ref, "aria-expanded": isOpen, "aria-controls": children ? tooltipId : ariaControls, "aria-label": ariaLabel, className: "ffe-tooltip__icon", onClick: handleClick, type: "button", tabIndex: tabIndex, id: tooltipButtonId },
|
|
32
20
|
React.createElement("span", { "aria-hidden": true },
|
|
33
21
|
React.createElement(Icon, { className: "ffe-button__icon", fileUrl: helpIcon, size: "sm", ariaLabel: "?" }))),
|
|
@@ -1,31 +1,20 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React, { useState } from 'react';
|
|
13
2
|
import { RadioButton } from '../RadioButton';
|
|
14
3
|
import { RadioButtonInputGroup } from '../RadioButtonInputGroup';
|
|
15
|
-
export default (
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
export default () => {
|
|
5
|
+
const [accountType, setAccountType] = useState('savings');
|
|
6
|
+
const [paymentFreq, setPaymentFreq] = useState('monthly');
|
|
18
7
|
return (React.createElement("div", { className: "ffe-grid" },
|
|
19
8
|
React.createElement("div", { className: "ffe-grid__row" },
|
|
20
9
|
React.createElement("div", { className: "ffe-grid__col--md-12 ffe-grid__col--sm-12" },
|
|
21
|
-
React.createElement(RadioButtonInputGroup, { label: "Choose your account type", description: "Select the type of account that best suits your needs", name: "account-type", onChange:
|
|
22
|
-
React.createElement(RadioButton,
|
|
23
|
-
React.createElement(RadioButton,
|
|
24
|
-
React.createElement(RadioButton,
|
|
10
|
+
React.createElement(RadioButtonInputGroup, { label: "Choose your account type", description: "Select the type of account that best suits your needs", name: "account-type", onChange: e => setAccountType(e.target.value), selectedValue: accountType }, inputProps => (React.createElement(React.Fragment, null,
|
|
11
|
+
React.createElement(RadioButton, { value: "savings", tooltip: "Best for long-term savings with higher interest rates", ...inputProps }, "Savings Account"),
|
|
12
|
+
React.createElement(RadioButton, { value: "checking", tooltip: "Perfect for daily transactions and bill payments", ...inputProps }, "Checking Account"),
|
|
13
|
+
React.createElement(RadioButton, { value: "investment", tooltip: "Ideal for growing your wealth through various investment options", ...inputProps }, "Investment Account")))))),
|
|
25
14
|
React.createElement("div", { className: "ffe-grid__row", style: { marginTop: '2rem' } },
|
|
26
15
|
React.createElement("div", { className: "ffe-grid__col--md-12 ffe-grid__col--sm-12" },
|
|
27
|
-
React.createElement(RadioButtonInputGroup, { label: "Payment frequency", name: "payment-frequency", onChange:
|
|
28
|
-
React.createElement(RadioButton,
|
|
29
|
-
React.createElement(RadioButton,
|
|
30
|
-
React.createElement(RadioButton,
|
|
31
|
-
}
|
|
16
|
+
React.createElement(RadioButtonInputGroup, { label: "Payment frequency", name: "payment-frequency", onChange: e => setPaymentFreq(e.target.value), selectedValue: paymentFreq, inline: true }, inputProps => (React.createElement(React.Fragment, null,
|
|
17
|
+
React.createElement(RadioButton, { value: "monthly", ...inputProps }, "Monthly"),
|
|
18
|
+
React.createElement(RadioButton, { value: "quarterly", ...inputProps }, "Quarterly"),
|
|
19
|
+
React.createElement(RadioButton, { value: "yearly", ...inputProps }, "Yearly"))))))));
|
|
20
|
+
};
|
|
@@ -1,18 +1,7 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React, { useState } from 'react';
|
|
13
2
|
import { RadioButtonInputGroup } from '../RadioButtonInputGroup';
|
|
14
3
|
import { RadioSwitch } from '../RadioSwitch';
|
|
15
|
-
export default (
|
|
16
|
-
|
|
17
|
-
return (React.createElement(RadioButtonInputGroup, { label: "Do you want email notifications?", description: "Choose whether to receive email notifications for important updates", name: "email-notifications", onChange:
|
|
18
|
-
}
|
|
4
|
+
export default () => {
|
|
5
|
+
const [selected, setSelected] = useState('yes'); // Initialize with a default value
|
|
6
|
+
return (React.createElement(RadioButtonInputGroup, { label: "Do you want email notifications?", description: "Choose whether to receive email notifications for important updates", name: "email-notifications", onChange: e => setSelected(e.target.value), selectedValue: selected }, inputProps => (React.createElement(RadioSwitch, { leftLabel: "Yes", leftValue: "yes", rightLabel: "No", rightValue: "no", ...inputProps }))));
|
|
7
|
+
};
|
package/es/i18n/i18n.js
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
25
3
|
import classNames from 'classnames';
|
|
@@ -27,13 +5,13 @@ import classNames from 'classnames';
|
|
|
27
5
|
* Internal factory component
|
|
28
6
|
* @ignore
|
|
29
7
|
*/
|
|
30
|
-
export
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return (React.createElement(Comp,
|
|
36
|
-
React.createElement("span", { className: classNames(
|
|
8
|
+
export const BaseFieldMessage = props => {
|
|
9
|
+
const { children, className, as: Comp = 'div', type, role = 'status', ...rest } = props;
|
|
10
|
+
const priorityHighIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+';
|
|
11
|
+
const checkIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+';
|
|
12
|
+
const infoIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
|
|
13
|
+
return (React.createElement(Comp, { className: classNames(`ffe-field-message`, `ffe-field-message--${type}`, className), role: role, ...rest },
|
|
14
|
+
React.createElement("span", { className: classNames(`ffe-field-message__icon`, `ffe-field-message__icon--${type}'`) }, (() => {
|
|
37
15
|
switch (type) {
|
|
38
16
|
case 'error':
|
|
39
17
|
return (React.createElement(Icon, { fileUrl: priorityHighIcon, ariaLabel: "Utropstegn", size: "sm" }));
|
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import { BaseFieldMessage } from './BaseFieldMessage';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return React.createElement(BaseFieldMessage, __assign({ role: role }, rest, { type: "error" }));
|
|
3
|
+
export const ErrorFieldMessage = ({ role = 'alert', ...rest }) => {
|
|
4
|
+
return React.createElement(BaseFieldMessage, { role: role, ...rest, type: "error" });
|
|
28
5
|
};
|
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import { BaseFieldMessage } from './BaseFieldMessage';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return React.createElement(BaseFieldMessage, __assign({ role: "none" }, rest, { type: "info" }));
|
|
3
|
+
export const InfoFieldMessage = ({ ...rest }) => {
|
|
4
|
+
return React.createElement(BaseFieldMessage, { role: "none", ...rest, type: "info" });
|
|
28
5
|
};
|
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import { BaseFieldMessage } from './BaseFieldMessage';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return React.createElement(BaseFieldMessage, __assign({ role: "none" }, rest, { type: "success" }));
|
|
3
|
+
export const SuccessFieldMessage = ({ ...rest }) => {
|
|
4
|
+
return React.createElement(BaseFieldMessage, { role: "none", ...rest, type: "success" });
|
|
28
5
|
};
|
package/lib/BaseRadioButton.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,33 +32,21 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.BaseRadioButton = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
exports.BaseRadioButton = react_1.default.forwardRef(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
var isSelected = selectedValue === undefined ? checked : selectedValue === value;
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
const Tooltip_1 = require("./Tooltip");
|
|
43
|
+
exports.BaseRadioButton = react_1.default.forwardRef(({ children, checked, className, labelProps, selectedValue, tooltip, tooltipProps = {}, value, onChange = () => { }, ...inputProps }, ref) => {
|
|
44
|
+
const id = (0, react_1.useId)();
|
|
45
|
+
const labelClasses = (0, classnames_1.default)({ 'ffe-radio-button--with-tooltip': tooltip }, className);
|
|
46
|
+
const isSelected = selectedValue === undefined ? checked : selectedValue === value;
|
|
70
47
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
71
|
-
react_1.default.createElement("input",
|
|
72
|
-
react_1.default.createElement("label",
|
|
48
|
+
react_1.default.createElement("input", { className: "ffe-radio-input", id: id, ref: ref, type: "radio", checked: isSelected, value: `${value}`, onChange: onChange, ...inputProps }),
|
|
49
|
+
react_1.default.createElement("label", { htmlFor: id, ...labelProps, className: labelClasses },
|
|
73
50
|
react_1.default.createElement("span", { className: "ffe-radio-input__content" }, children)),
|
|
74
|
-
tooltip && react_1.default.createElement(Tooltip_1.Tooltip,
|
|
51
|
+
tooltip && react_1.default.createElement(Tooltip_1.Tooltip, { ...tooltipProps }, tooltip)));
|
|
75
52
|
});
|
package/lib/Checkbox.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,29 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.Checkbox = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
exports.Checkbox = react_1.default.forwardRef(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var labelProps = {
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
exports.Checkbox = react_1.default.forwardRef(({ children, hiddenLabel, inline = true, noMargins, id, checked, onChange, disabled, ...rest }, ref) => {
|
|
43
|
+
const generatedId = (0, react_1.useId)();
|
|
44
|
+
const inputId = id !== null && id !== void 0 ? id : generatedId;
|
|
45
|
+
const labelProps = {
|
|
69
46
|
className: (0, classnames_1.default)({
|
|
70
47
|
'ffe-checkbox': true,
|
|
71
48
|
'ffe-checkbox--inline': inline,
|
|
@@ -75,10 +52,10 @@ exports.Checkbox = react_1.default.forwardRef(function (_a, ref) {
|
|
|
75
52
|
htmlFor: inputId,
|
|
76
53
|
};
|
|
77
54
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
|
-
react_1.default.createElement("input",
|
|
55
|
+
react_1.default.createElement("input", { ref: ref, className: "ffe-hidden-checkbox", id: inputId, type: "checkbox", checked: checked, disabled: disabled, onChange: !disabled ? onChange : undefined, ...rest }),
|
|
79
56
|
typeof children === 'function' ? (children(labelProps)) : (
|
|
80
57
|
// eslint-disable-next-line jsx-a11y/label-has-for
|
|
81
|
-
react_1.default.createElement("label",
|
|
58
|
+
react_1.default.createElement("label", { ...labelProps },
|
|
82
59
|
react_1.default.createElement("span", { className: (0, classnames_1.default)('ffe-checkbox__content', {
|
|
83
60
|
'ffe-screenreader-only': hiddenLabel,
|
|
84
61
|
}) }, children)))));
|
package/lib/Input.js
CHANGED
|
@@ -1,34 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.Input = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
exports.Input = react_1.default.forwardRef(
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('ffe-input-field', 'ffe-default-mode', { 'ffe-input-field--inline': inline }, { 'ffe-input-field--text-right-align': textRightAlign }, className), ref: ref }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
exports.Input = react_1.default.forwardRef(({ className, inline, textRightAlign, ...rest }, ref) => {
|
|
10
|
+
return (react_1.default.createElement("input", { className: (0, classnames_1.default)('ffe-input-field', 'ffe-default-mode', { 'ffe-input-field--inline': inline }, { 'ffe-input-field--text-right-align': textRightAlign }, className), ref: ref, ...rest }));
|
|
34
11
|
});
|