@superrb/react-addons 1.2.2 → 1.2.3
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/.eslintrc.json +24 -0
- package/components/button.d.ts +1 -1
- package/components/button.d.ts.map +1 -1
- package/components/button.js +6 -6
- package/components/context-wrapper.d.ts +1 -1
- package/components/context-wrapper.js +1 -1
- package/components/cookie-banner.js +23 -23
- package/components/form/error-message.d.ts +2 -2
- package/components/form/error-message.js +1 -1
- package/components/form/field.d.ts +3 -3
- package/components/form/field.d.ts.map +1 -1
- package/components/form/field.js +4 -4
- package/components/form/submit-button.js +2 -2
- package/components/form/types.d.ts +3 -3
- package/components/form.d.ts +5 -5
- package/components/form.d.ts.map +1 -1
- package/components/form.js +21 -21
- package/components/menu-toggle.d.ts +2 -2
- package/components/menu-toggle.js +10 -10
- package/components/modal.d.ts +1 -1
- package/components/modal.js +6 -6
- package/components.d.ts +8 -8
- package/components.js +8 -8
- package/context/cookies-context-provider.d.ts +1 -1
- package/context/cookies-context-provider.js +7 -7
- package/context/modal-context-provider.d.ts +1 -1
- package/context/modal-context-provider.js +4 -4
- package/context/nav-context-provider.d.ts +1 -1
- package/context/nav-context-provider.js +4 -4
- package/context.d.ts +3 -3
- package/context.js +3 -3
- package/hooks/use-async.d.ts +1 -1
- package/hooks/use-async.js +7 -8
- package/hooks/use-draggable-scroll.d.ts +1 -1
- package/hooks/use-draggable-scroll.js +7 -7
- package/hooks/use-event-listener.js +3 -4
- package/hooks/use-hide-on-scroll.js +6 -6
- package/hooks/use-is-in-viewport.js +2 -2
- package/hooks/use-is-overflowing.d.ts +4 -0
- package/hooks/use-is-overflowing.d.ts.map +1 -0
- package/hooks/use-is-overflowing.js +4 -0
- package/hooks/use-modal.js +2 -2
- package/hooks/use-parallax.js +3 -3
- package/hooks.d.ts +13 -12
- package/hooks.d.ts.map +1 -1
- package/hooks.js +13 -12
- package/index.d.ts +5 -5
- package/index.js +5 -5
- package/package.json +10 -3
- package/storage.js +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/utils/animate.d.ts +1 -1
- package/utils/animate.js +2 -2
- package/utils/animator.js +2 -2
- package/utils/easing-functions.d.ts.map +1 -1
- package/utils/easing-functions.js +14 -14
- package/utils/extend-class.js +1 -1
- package/utils/scroll-to-hash.js +2 -2
- package/utils.d.ts +7 -7
- package/utils.js +7 -7
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": [
|
|
3
|
+
"prettier",
|
|
4
|
+
"next/core-web-vitals",
|
|
5
|
+
"plugin:jsx-a11y/recommended"
|
|
6
|
+
],
|
|
7
|
+
"env": {
|
|
8
|
+
"browser": true,
|
|
9
|
+
"es6": true
|
|
10
|
+
},
|
|
11
|
+
"parserOptions": {
|
|
12
|
+
"ecmaFeatures": {
|
|
13
|
+
"jsx": true
|
|
14
|
+
},
|
|
15
|
+
"ecmaVersion": 2021,
|
|
16
|
+
"sourceType": "module"
|
|
17
|
+
},
|
|
18
|
+
"rules": {
|
|
19
|
+
"react/prop-types": "off",
|
|
20
|
+
"react/react-in-jsx-scope": "off",
|
|
21
|
+
"quotes": ["error", "single"],
|
|
22
|
+
"jsx-quotes": ["error", "prefer-double"]
|
|
23
|
+
}
|
|
24
|
+
}
|
package/components/button.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, PropsWithChildren } from
|
|
1
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, PropsWithChildren } from 'react';
|
|
2
2
|
type Props = (PropsWithChildren<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> | ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>) & {
|
|
3
3
|
label?: string;
|
|
4
4
|
label_a11y?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,cAAc,EACd,iBAAiB,EAEjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,KAAK,KAAK,GAAG,CACT,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,GACxE,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,oBAAoB,CAAC,iBAAiB,CAAC,CAC1C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,cAAc,EACd,iBAAiB,EAEjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,KAAK,KAAK,GAAG,CACT,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,GACxE,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,oBAAoB,CAAC,iBAAiB,CAAC,CAC1C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;;AAgED,wBAA2B;AAC3B,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,CAAA"}
|
package/components/button.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, memo, } from
|
|
3
|
-
import { extendClass } from
|
|
4
|
-
const Button = forwardRef(({ children, label, label_a11y, onClick, className =
|
|
2
|
+
import { forwardRef, memo, } from 'react';
|
|
3
|
+
import { extendClass } from '../utils';
|
|
4
|
+
const Button = forwardRef(({ children, label, label_a11y, onClick, className = '', href, ...props }, ref) => {
|
|
5
5
|
className = `button ${className}`;
|
|
6
|
-
const renderedChildren = (_jsxs(_Fragment, { children: [label_a11y && _jsx("span", { className: "screenreader-text", children: label_a11y }), label && (_jsx("span", { className: `${extendClass(className,
|
|
6
|
+
const renderedChildren = (_jsxs(_Fragment, { children: [label_a11y && _jsx("span", { className: "screenreader-text", children: label_a11y }), label && (_jsx("span", { className: `${extendClass(className, 'label')}`, "aria-hidden": label_a11y !== undefined, "data-text": label, children: label })), children] }));
|
|
7
7
|
const linkProps = {
|
|
8
8
|
...props,
|
|
9
9
|
onClick,
|
|
10
10
|
className,
|
|
11
|
-
|
|
11
|
+
'aria-label': label_a11y || label,
|
|
12
12
|
ref,
|
|
13
13
|
};
|
|
14
14
|
if (href) {
|
|
@@ -18,7 +18,7 @@ const Button = forwardRef(({ children, label, label_a11y, onClick, className = "
|
|
|
18
18
|
...props,
|
|
19
19
|
onClick,
|
|
20
20
|
className,
|
|
21
|
-
|
|
21
|
+
'aria-label': label_a11y || label,
|
|
22
22
|
ref,
|
|
23
23
|
};
|
|
24
24
|
return _jsx("button", { ...buttonProps, children: renderedChildren });
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PropsWithChildren } from
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
2
|
declare const ContextWrapper: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ContextWrapper;
|
|
4
4
|
//# sourceMappingURL=context-wrapper.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { CookiesContextProvider, ModalContextProvider, NavContextProvider, } from
|
|
2
|
+
import { CookiesContextProvider, ModalContextProvider, NavContextProvider, } from '../context';
|
|
3
3
|
const ContextWrapper = ({ children }) => (_jsx(CookiesContextProvider, { children: _jsx(ModalContextProvider, { children: _jsx(NavContextProvider, { children: children }) }) }));
|
|
4
4
|
export default ContextWrapper;
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useState } from
|
|
4
|
-
import { CookiesContext } from
|
|
5
|
-
import { Button, Form } from
|
|
6
|
-
import * as Yup from
|
|
7
|
-
import SubmitButton from
|
|
8
|
-
import { session } from
|
|
3
|
+
import { useContext, useState } from 'react';
|
|
4
|
+
import { CookiesContext } from '../context';
|
|
5
|
+
import { Button, Form } from '../components';
|
|
6
|
+
import * as Yup from 'yup';
|
|
7
|
+
import SubmitButton from './form/submit-button';
|
|
8
|
+
import { session } from '../storage';
|
|
9
9
|
const content = {
|
|
10
|
-
title:
|
|
11
|
-
text:
|
|
12
|
-
form_text:
|
|
13
|
-
policyLink:
|
|
14
|
-
policyLabel:
|
|
15
|
-
customiseLabel:
|
|
16
|
-
rejectLabel:
|
|
17
|
-
acceptLabel:
|
|
18
|
-
acceptAllLabel:
|
|
10
|
+
title: 'Cookie Notice',
|
|
11
|
+
text: 'We use cookies to ensure you get the best experience on our website.',
|
|
12
|
+
form_text: 'Select the type of cookies you wish to allow.',
|
|
13
|
+
policyLink: '/legal/cookies-policy',
|
|
14
|
+
policyLabel: 'Cookie Policy',
|
|
15
|
+
customiseLabel: 'Customise',
|
|
16
|
+
rejectLabel: 'Reject',
|
|
17
|
+
acceptLabel: 'Accept',
|
|
18
|
+
acceptAllLabel: 'Accept All',
|
|
19
19
|
tracking: {
|
|
20
|
-
title:
|
|
21
|
-
description:
|
|
20
|
+
title: 'Optional Cookies',
|
|
21
|
+
description: 'These cookies are set by third-parties to track browsing habits in order to personalise your experience.',
|
|
22
22
|
},
|
|
23
23
|
necessary: {
|
|
24
|
-
title:
|
|
25
|
-
description:
|
|
24
|
+
title: 'Necessary Cookies',
|
|
25
|
+
description: 'These cookies are necessary for the website to function and cannot be switched off.',
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
const CookieBanner = ({ allowCustomisation = true, allowReject = false, title = content.title, text = content.text, formText = content.form_text, policyLink = content.policyLink, policyLabel = content.policyLabel, }) => {
|
|
29
29
|
const { cookiesAccepted, setCookiesAccepted, setTrackingCookiesAccepted } = useContext(CookiesContext);
|
|
30
30
|
const [animate, setAnimate] = useState(false);
|
|
31
31
|
const [formOpen, setFormOpen] = useState(false);
|
|
32
|
-
const [rejected, setRejected] = useState(!!session.getItem(
|
|
32
|
+
const [rejected, setRejected] = useState(!!session.getItem('cookies-rejected'));
|
|
33
33
|
const openForm = () => {
|
|
34
34
|
setFormOpen(true);
|
|
35
35
|
};
|
|
36
36
|
const reject = () => {
|
|
37
37
|
setRejected(true);
|
|
38
|
-
session.setItem(
|
|
38
|
+
session.setItem('cookies-rejected', 'true');
|
|
39
39
|
};
|
|
40
40
|
const accept = (necessary, tracking) => {
|
|
41
41
|
setAnimate(true);
|
|
@@ -67,6 +67,6 @@ const CookieBanner = ({ allowCustomisation = true, allowReject = false, title =
|
|
|
67
67
|
`)
|
|
68
68
|
.meta({ disabled: true }),
|
|
69
69
|
});
|
|
70
|
-
return (_jsx(_Fragment, { children: !rejected && !cookiesAccepted ? (_jsx("div", { className: `cookie-banner ${animate ?
|
|
70
|
+
return (_jsx(_Fragment, { children: !rejected && !cookiesAccepted ? (_jsx("div", { className: `cookie-banner ${animate ? ' cookie-banner--hide' : ''} `, children: _jsx("div", { className: "cookie-banner__container container", children: _jsxs("div", { className: "cookie-banner__inner", children: [allowCustomisation && (_jsxs("div", { className: "cookie-banner__form", "aria-hidden": !formOpen, children: [formText && (_jsx("p", { className: "cookie-banner__form-text", children: formText })), _jsx(Form, { className: "cookie-banner__form", schema: schema, onSubmit: submit, renderSubmit: () => _jsx(SubmitButton, { label: acceptLabel }), renderSuccessMessage: false })] })), _jsxs("div", { className: "cookie-banner__main", children: [_jsxs("div", { className: "cookie-banner__message", "aria-hidden": formOpen, children: [title && _jsx("h2", { className: "cookie-banner__title", children: title }), text && (_jsxs("p", { className: "cookie-banner__text", children: [text, " ", _jsx("a", { href: policyLink, children: policyLabel })] }))] }), _jsxs("div", { className: "cookie-banner__buttons", children: [allowReject && !allowCustomisation && !formOpen && (_jsx(Button, { onClick: reject, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.rejectLabel })), allowCustomisation && !formOpen && (_jsx(Button, { onClick: openForm, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.customiseLabel })), !formOpen && (_jsx(Button, { onClick: acceptAll, className: "cookie-banner__agree button button__rounded button__rounded--black", label: acceptLabel }))] })] })] }) }) })) : ('') }));
|
|
71
71
|
};
|
|
72
72
|
export default CookieBanner;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FieldError, FieldErrorsImpl, Merge } from
|
|
2
|
-
import { AnySchema } from
|
|
1
|
+
import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
|
|
2
|
+
import { AnySchema } from 'yup';
|
|
3
3
|
export interface ErrorMessageProps {
|
|
4
4
|
error?: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
|
|
5
5
|
fieldSchema?: AnySchema;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
const ErrorMessage = ({ error }) => {
|
|
3
|
-
const GENERIC_ERROR =
|
|
3
|
+
const GENERIC_ERROR = 'Sorry, an error occurred';
|
|
4
4
|
return (_jsx("span", { className: "form__error", children: error?.message || GENERIC_ERROR }));
|
|
5
5
|
};
|
|
6
6
|
export default ErrorMessage;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FormEventHandler } from
|
|
2
|
-
import { AnySchema } from
|
|
3
|
-
import { UseFormRegisterReturn } from
|
|
1
|
+
import { FormEventHandler } from 'react';
|
|
2
|
+
import { AnySchema } from 'yup';
|
|
3
|
+
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
4
4
|
interface Props {
|
|
5
5
|
register: UseFormRegisterReturn<string>;
|
|
6
6
|
schema: AnySchema<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/form/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,gBAAgB,EAAuB,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/form/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,gBAAgB,EAAuB,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,UAAU,KAAK;IACb,QAAQ,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CACxC;AAED,QAAA,MAAM,SAAS,sCAAuC,KAAK,4CAuE1D,CAAA;AAED,eAAe,SAAS,CAAA"}
|
package/components/form/field.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useState } from
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
4
|
const FormField = ({ register, schema, id, onInput }) => {
|
|
5
5
|
const [touched, setTouched] = useState(false);
|
|
6
6
|
const [rendered, setRendered] = useState(false);
|
|
@@ -25,8 +25,8 @@ const FormField = ({ register, schema, id, onInput }) => {
|
|
|
25
25
|
setRendered(true);
|
|
26
26
|
}, []);
|
|
27
27
|
if (schema?.spec?.meta?.options?.length > 0) {
|
|
28
|
-
return (_jsxs("select", { className: "form__control form__control--select", ...fieldProps, children: [schema?.spec?.meta?.placeholder ? (_jsx("option", { value: "", children: schema?.spec?.meta?.placeholder },
|
|
28
|
+
return (_jsxs("select", { className: "form__control form__control--select", ...fieldProps, children: [schema?.spec?.meta?.placeholder ? (_jsx("option", { value: "", children: schema?.spec?.meta?.placeholder }, 'placeholder')) : null, schema?.spec?.meta?.options?.map((value, index) => (_jsx("option", { value: value, children: value }, value)))] }));
|
|
29
29
|
}
|
|
30
|
-
return (_jsx(_Fragment, { children: schema?.spec?.meta?.textarea === true ? (_jsx("textarea", { className: "form__control", ...fieldProps })) : schema?.type ===
|
|
30
|
+
return (_jsx(_Fragment, { children: schema?.spec?.meta?.textarea === true ? (_jsx("textarea", { className: "form__control", ...fieldProps })) : schema?.type === 'boolean' ? (_jsx("input", { type: "checkbox", className: "form__control form__control--checkbox", checked: !rendered ? schema?.spec?.default : null, ...fieldProps })) : schema?.spec?.meta?.hidden === true ? (_jsx("input", { type: "hidden", className: "form__control form__control--hidden", ...fieldProps })) : schema?.type === 'mixed' ? (_jsx("input", { className: "form__control form__control--mixed", type: "file", ...fieldProps })) : (_jsx("input", { className: "form__control", ...fieldProps })) }));
|
|
31
31
|
};
|
|
32
32
|
export default FormField;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Button } from
|
|
2
|
+
import { Button } from '../../components';
|
|
3
3
|
const SubmitButton = ({ label }) => {
|
|
4
|
-
return (_jsx(Button, { label: label ||
|
|
4
|
+
return (_jsx(Button, { label: label || 'Submit', className: "form__submit", type: "submit" }));
|
|
5
5
|
};
|
|
6
6
|
export default SubmitButton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ReactNode } from
|
|
2
|
-
import { FieldError } from
|
|
3
|
-
import { AnySchema } from
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
3
|
+
import { AnySchema } from 'yup';
|
|
4
4
|
export type FieldRenderer = (props: object, error?: FieldError, schema?: AnySchema) => ReactNode;
|
|
5
5
|
//# sourceMappingURL=types.d.ts.map
|
package/components/form.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ReactNode } from
|
|
2
|
-
import { ObjectSchema, AnySchema } from
|
|
3
|
-
import { FieldError } from
|
|
4
|
-
import { Status } from
|
|
5
|
-
import { FieldRenderer } from
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ObjectSchema, AnySchema } from 'yup';
|
|
3
|
+
import { FieldError } from 'react-hook-form';
|
|
4
|
+
import { Status } from '../hooks/use-async';
|
|
5
|
+
import { FieldRenderer } from './form/types';
|
|
6
6
|
export interface FormProps<T extends ObjectSchema<any>> {
|
|
7
7
|
schema: T;
|
|
8
8
|
name?: string;
|
package/components/form.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAa,SAAS,EAAE,MAAM,KAAK,CAAA;AAExD,OAAO,EAAE,UAAU,EAAW,MAAM,iBAAiB,CAAA;AAErD,OAAiB,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAO5C,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC;IACpD,MAAM,EAAE,CAAC,CAAA;IACT,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,KAAK,IAAI,CAAA;IACtD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,oBAAoB,CAAC,EACjB,CAAC,CAAC,IAAI,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,KAAK,SAAS,CAAC,GAClD,KAAK,CAAA;IACT,kBAAkB,CAAC,EAAE,CACnB,KAAK,CAAC,EAAE,UAAU,EAClB,WAAW,CAAC,EAAE,SAAS,KACpB,SAAS,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,SAAS,CAAA;IAC9B,SAAS,CAAC,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,aAAa;KAAE,CAAA;IACjD,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CACzC;AAiBD,QAAA,MAAM,IAAI,oJAsMT,CAAA;AAED,eAAe,IAAI,CAAA"}
|
package/components/form.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useState, useEffect, Fragment, forwardRef, useRef, } from
|
|
4
|
-
import { paramCase, sentenceCase } from
|
|
5
|
-
import { useForm } from
|
|
6
|
-
import { yupResolver } from
|
|
7
|
-
import useAsync from
|
|
8
|
-
import SuccessMessage from
|
|
9
|
-
import ErrorMessage from
|
|
10
|
-
import FormField from
|
|
11
|
-
import SubmitButton from
|
|
12
|
-
import messages from
|
|
3
|
+
import { useCallback, useState, useEffect, Fragment, forwardRef, useRef, } from 'react';
|
|
4
|
+
import { paramCase, sentenceCase } from 'change-case';
|
|
5
|
+
import { useForm } from 'react-hook-form';
|
|
6
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
7
|
+
import useAsync from '../hooks/use-async';
|
|
8
|
+
import SuccessMessage from './form/success-message';
|
|
9
|
+
import ErrorMessage from './form/error-message';
|
|
10
|
+
import FormField from './form/field';
|
|
11
|
+
import SubmitButton from './form/submit-button';
|
|
12
|
+
import messages from './form/messages.json';
|
|
13
13
|
const toBase64 = (file) => new Promise((resolve, reject) => {
|
|
14
14
|
const reader = new FileReader();
|
|
15
15
|
reader.onloadend = () => {
|
|
16
16
|
// Use a regex to remove data url part
|
|
17
17
|
const base64String = reader.result
|
|
18
18
|
?.toString()
|
|
19
|
-
.replace(
|
|
20
|
-
.replace(/^.+,/,
|
|
19
|
+
.replace('data:', '')
|
|
20
|
+
.replace(/^.+,/, '');
|
|
21
21
|
resolve(base64String);
|
|
22
22
|
};
|
|
23
23
|
reader.readAsDataURL(file);
|
|
24
24
|
reader.onerror = reject;
|
|
25
25
|
});
|
|
26
|
-
const Form = forwardRef(({ schema, name, action, className, method =
|
|
26
|
+
const Form = forwardRef(({ schema, name, action, className, method = 'post', onSubmit = () => { }, onStatusChange = () => { }, renderSuccessMessage = (data) => _jsx(SuccessMessage, {}), renderErrorMessage = (error, fieldSchema) => (_jsx(ErrorMessage, { error: error, fieldSchema: fieldSchema })), renderSubmit = () => _jsx(SubmitButton, {}), renderers = {}, executeRecaptcha = undefined, ...props }, ref) => {
|
|
27
27
|
const [data, setData] = useState({});
|
|
28
28
|
const fieldRefs = useRef({});
|
|
29
29
|
for (const name of Object.keys(schema.fields)) {
|
|
@@ -58,12 +58,12 @@ const Form = forwardRef(({ schema, name, action, className, method = "post", onS
|
|
|
58
58
|
// if recaptcha is enabled generate a token and add to the data
|
|
59
59
|
if (executeRecaptcha) {
|
|
60
60
|
const token = await executeRecaptcha();
|
|
61
|
-
data[
|
|
61
|
+
data['recaptchaToken'] = token;
|
|
62
62
|
}
|
|
63
63
|
const response = await fetch(action, {
|
|
64
|
-
method:
|
|
64
|
+
method: 'post',
|
|
65
65
|
headers: {
|
|
66
|
-
contentType:
|
|
66
|
+
contentType: 'application/json',
|
|
67
67
|
},
|
|
68
68
|
body: JSON.stringify(data),
|
|
69
69
|
});
|
|
@@ -91,14 +91,14 @@ const Form = forwardRef(({ schema, name, action, className, method = "post", onS
|
|
|
91
91
|
field.spec.label = sentenceCase(fieldName);
|
|
92
92
|
}
|
|
93
93
|
});
|
|
94
|
-
return (_jsx(_Fragment, { children: status ===
|
|
94
|
+
return (_jsx(_Fragment, { children: status === 'success' && renderSuccessMessage !== false ? (_jsx(_Fragment, { children: renderSuccessMessage(data) })) : (_jsxs("form", { className: "form", action: action, method: method, onSubmit: handleSubmit(execute), noValidate: true, ref: ref, ...props, children: [error && renderErrorMessage({ message: error }), Object.keys(schema.fields).map((fieldName, key) => {
|
|
95
95
|
const field = schema.fields[fieldName];
|
|
96
|
-
return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field })) : (_jsx("div", { className: `form__group form__group--${paramCase(fieldName)} ${fieldName in errors ?
|
|
96
|
+
return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field })) : (_jsx("div", { className: `form__group form__group--${paramCase(fieldName)} ${fieldName in errors ? 'form__group--error' : ''} ${field?.type === 'boolean' ? 'form__group--checkbox' : ''}`, ref: (ref) => {
|
|
97
97
|
fieldRefs.current[fieldName] = ref;
|
|
98
98
|
}, children: _jsxs("label", { className: "form__label", htmlFor: `${name}__${paramCase(fieldName)}`, children: [_jsx("span", { className: "form__label-text", dangerouslySetInnerHTML: {
|
|
99
|
-
__html: `${field?.spec?.label} ${!field?.spec?.optional ?
|
|
99
|
+
__html: `${field?.spec?.label} ${!field?.spec?.optional ? '*' : ''}`,
|
|
100
100
|
} }), fieldName in renderers ? (renderers[fieldName](register(fieldName), errors[fieldName], field)) : (_jsxs(_Fragment, { children: [_jsx(FormField, { register: register(fieldName), id: `${name}__${paramCase(fieldName)}`, schema: field, onInput: (event) => {
|
|
101
|
-
fieldRefs.current[fieldName]?.classList.add(
|
|
101
|
+
fieldRefs.current[fieldName]?.classList.add('form__group--filled');
|
|
102
102
|
} }), fieldName in errors &&
|
|
103
103
|
renderErrorMessage(errors[fieldName], field)] }))] }) })) }, key));
|
|
104
104
|
}), renderSubmit()] })) }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from
|
|
1
|
+
import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from 'react';
|
|
2
2
|
interface Props extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
|
|
3
|
-
|
|
3
|
+
'aria-controls': string;
|
|
4
4
|
className?: string;
|
|
5
5
|
label?: string;
|
|
6
6
|
closeLabel?: string;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useContext, useEffect, useState, } from
|
|
4
|
-
import { NavContext } from
|
|
5
|
-
import { Button } from
|
|
6
|
-
import { extendClass } from
|
|
7
|
-
const MenuToggle = ({
|
|
3
|
+
import { useCallback, useContext, useEffect, useState, } from 'react';
|
|
4
|
+
import { NavContext } from '../context';
|
|
5
|
+
import { Button } from '../components';
|
|
6
|
+
import { extendClass } from '../utils';
|
|
7
|
+
const MenuToggle = ({ 'aria-controls': ariaControls, className = '', label = 'Open Nav', closeLabel = 'Close Nav', renderIcon = undefined, ...props }) => {
|
|
8
8
|
const { navOpen, toggleNav } = useContext(NavContext);
|
|
9
|
-
const [icon, setIcon] = useState(navOpen ?
|
|
9
|
+
const [icon, setIcon] = useState(navOpen ? '×' : '꠵');
|
|
10
10
|
useEffect(() => {
|
|
11
11
|
if (renderIcon) {
|
|
12
12
|
setIcon(renderIcon(navOpen));
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
|
-
setIcon(navOpen ?
|
|
15
|
+
setIcon(navOpen ? '×' : '꠵');
|
|
16
16
|
}, [navOpen]);
|
|
17
17
|
const handleClick = useCallback(() => {
|
|
18
18
|
if (document &&
|
|
19
19
|
document?.activeElement instanceof Element &&
|
|
20
|
-
|
|
20
|
+
'blur' in document?.activeElement) {
|
|
21
21
|
;
|
|
22
22
|
document.activeElement?.blur();
|
|
23
23
|
}
|
|
24
24
|
toggleNav();
|
|
25
25
|
}, [toggleNav]);
|
|
26
|
-
return (_jsx(Button, { className: `menu-toggle ${className}`, onClick: handleClick, "aria-expanded": navOpen, "aria-controls": ariaControls, label_a11y: navOpen ? closeLabel : label, ...props, children: _jsx("span", { className: `menu-toggle__icon ${extendClass(className,
|
|
26
|
+
return (_jsx(Button, { className: `menu-toggle ${className}`, onClick: handleClick, "aria-expanded": navOpen, "aria-controls": ariaControls, label_a11y: navOpen ? closeLabel : label, ...props, children: _jsx("span", { className: `menu-toggle__icon ${extendClass(className, 'icon')}`, children: icon }) }));
|
|
27
27
|
};
|
|
28
28
|
export default MenuToggle;
|
package/components/modal.d.ts
CHANGED
package/components/modal.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useEffect, useRef, useCallback, } from
|
|
4
|
-
import { local } from
|
|
5
|
-
import { useLockBodyScroll, useModal } from
|
|
3
|
+
import { useState, useEffect, useRef, useCallback, } from 'react';
|
|
4
|
+
import { local } from '../storage';
|
|
5
|
+
import { useLockBodyScroll, useModal } from '../hooks';
|
|
6
6
|
const Modal = ({ name, className, openAfter, dismissable = false, children, }) => {
|
|
7
7
|
const [dismissed, setDismissed] = useState(false);
|
|
8
8
|
const openTimer = useRef();
|
|
@@ -10,7 +10,7 @@ const Modal = ({ name, className, openAfter, dismissable = false, children, }) =
|
|
|
10
10
|
useLockBodyScroll(isOpen);
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
if (dismissable) {
|
|
13
|
-
setDismissed(local.getItem(`${name}-popup-dismissed`) ===
|
|
13
|
+
setDismissed(local.getItem(`${name}-popup-dismissed`) === 'true');
|
|
14
14
|
}
|
|
15
15
|
}, []);
|
|
16
16
|
useEffect(() => {
|
|
@@ -24,7 +24,7 @@ const Modal = ({ name, className, openAfter, dismissable = false, children, }) =
|
|
|
24
24
|
const close = useCallback(() => {
|
|
25
25
|
closeModal();
|
|
26
26
|
if (dismissable) {
|
|
27
|
-
local.setItem(`${name}-popup-dismissed`,
|
|
27
|
+
local.setItem(`${name}-popup-dismissed`, 'true');
|
|
28
28
|
setDismissed(true);
|
|
29
29
|
}
|
|
30
30
|
}, [name, closeModal]);
|
package/components.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Components
|
|
3
3
|
*/
|
|
4
|
-
import BackToTop from
|
|
5
|
-
import Button from
|
|
6
|
-
import ContextWrapper from
|
|
7
|
-
import CookieBanner from
|
|
8
|
-
import Form from
|
|
9
|
-
import MenuToggle from
|
|
10
|
-
import Modal from
|
|
11
|
-
import SkipTo from
|
|
4
|
+
import BackToTop from './components/back-to-top';
|
|
5
|
+
import Button from './components/button';
|
|
6
|
+
import ContextWrapper from './components/context-wrapper';
|
|
7
|
+
import CookieBanner from './components/cookie-banner';
|
|
8
|
+
import Form from './components/form';
|
|
9
|
+
import MenuToggle from './components/menu-toggle';
|
|
10
|
+
import Modal from './components/modal';
|
|
11
|
+
import SkipTo from './components/skip-to';
|
|
12
12
|
export { BackToTop, Button, ContextWrapper, CookieBanner, Form, MenuToggle, Modal, SkipTo, };
|
|
13
13
|
//# sourceMappingURL=components.d.ts.map
|
package/components.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Components
|
|
3
3
|
*/
|
|
4
|
-
import BackToTop from
|
|
5
|
-
import Button from
|
|
6
|
-
import ContextWrapper from
|
|
7
|
-
import CookieBanner from
|
|
8
|
-
import Form from
|
|
9
|
-
import MenuToggle from
|
|
10
|
-
import Modal from
|
|
11
|
-
import SkipTo from
|
|
4
|
+
import BackToTop from './components/back-to-top';
|
|
5
|
+
import Button from './components/button';
|
|
6
|
+
import ContextWrapper from './components/context-wrapper';
|
|
7
|
+
import CookieBanner from './components/cookie-banner';
|
|
8
|
+
import Form from './components/form';
|
|
9
|
+
import MenuToggle from './components/menu-toggle';
|
|
10
|
+
import Modal from './components/modal';
|
|
11
|
+
import SkipTo from './components/skip-to';
|
|
12
12
|
export { BackToTop, Button, ContextWrapper, CookieBanner, Form, MenuToggle, Modal, SkipTo, };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useCallback, useEffect, useState, } from
|
|
4
|
-
import Cookies from
|
|
3
|
+
import { createContext, useCallback, useEffect, useState, } from 'react';
|
|
4
|
+
import Cookies from 'js-cookie';
|
|
5
5
|
export const CookiesContext = createContext({
|
|
6
6
|
cookiesAccepted: false,
|
|
7
7
|
setCookiesAccepted: (accepted) => { },
|
|
@@ -12,21 +12,21 @@ export const CookiesContextProvider = ({ children }) => {
|
|
|
12
12
|
const [cookiesAccepted, setCookiesAcceptedStorage] = useState(false);
|
|
13
13
|
const [trackingCookiesAccepted, setTrackingCookiesAcceptedStorage] = useState(false);
|
|
14
14
|
useEffect(() => {
|
|
15
|
-
const accepted = Cookies.get(
|
|
15
|
+
const accepted = Cookies.get('accepted-cookies') || false;
|
|
16
16
|
setCookiesAcceptedStorage(!!accepted);
|
|
17
17
|
}, [setCookiesAcceptedStorage]);
|
|
18
18
|
useEffect(() => {
|
|
19
|
-
const accepted = Cookies.get(
|
|
19
|
+
const accepted = Cookies.get('accepted-tracking-cookies') || false;
|
|
20
20
|
setTrackingCookiesAcceptedStorage(!!accepted);
|
|
21
21
|
}, [setTrackingCookiesAcceptedStorage]);
|
|
22
22
|
const setCookiesAccepted = useCallback((accepted) => {
|
|
23
|
-
Cookies.set(
|
|
23
|
+
Cookies.set('accepted-cookies', accepted.toString(), {
|
|
24
24
|
expires: 30,
|
|
25
25
|
});
|
|
26
26
|
setCookiesAcceptedStorage(accepted);
|
|
27
27
|
}, [setCookiesAcceptedStorage]);
|
|
28
28
|
const setTrackingCookiesAccepted = useCallback((accepted) => {
|
|
29
|
-
Cookies.set(
|
|
29
|
+
Cookies.set('accepted-tracking-cookies', accepted.toString(), {
|
|
30
30
|
expires: 30,
|
|
31
31
|
});
|
|
32
32
|
setTrackingCookiesAcceptedStorage(accepted);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useState } from
|
|
3
|
+
import { createContext, useState } from 'react';
|
|
4
4
|
export const ModalContext = createContext({
|
|
5
5
|
openState: {},
|
|
6
6
|
isOpen: (name) => false,
|
|
@@ -13,14 +13,14 @@ export const ModalContextProvider = ({ children }) => {
|
|
|
13
13
|
return openState[name] || false;
|
|
14
14
|
};
|
|
15
15
|
const openModal = (name) => {
|
|
16
|
-
setOpenState(state => {
|
|
16
|
+
setOpenState((state) => {
|
|
17
17
|
const newState = { ...state };
|
|
18
18
|
newState[name] = true;
|
|
19
19
|
return newState;
|
|
20
20
|
});
|
|
21
21
|
};
|
|
22
22
|
const closeModal = (name) => {
|
|
23
|
-
setOpenState(state => {
|
|
23
|
+
setOpenState((state) => {
|
|
24
24
|
const newState = { ...state };
|
|
25
25
|
newState[name] = false;
|
|
26
26
|
return newState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useLockBodyScroll } from
|
|
4
|
-
import { createContext, useCallback, useState } from
|
|
3
|
+
import { useLockBodyScroll } from '../hooks';
|
|
4
|
+
import { createContext, useCallback, useState } from 'react';
|
|
5
5
|
export const NavContext = createContext({
|
|
6
6
|
navOpen: false,
|
|
7
7
|
toggleNav: () => { },
|
|
@@ -12,7 +12,7 @@ export const NavContextProvider = ({ children }) => {
|
|
|
12
12
|
const [navOpen, setNavOpen] = useState(false);
|
|
13
13
|
useLockBodyScroll(navOpen);
|
|
14
14
|
const toggleNav = useCallback(() => {
|
|
15
|
-
setNavOpen(navOpen => !navOpen);
|
|
15
|
+
setNavOpen((navOpen) => !navOpen);
|
|
16
16
|
}, [setNavOpen]);
|
|
17
17
|
const openNav = useCallback(() => {
|
|
18
18
|
setNavOpen(true);
|
package/context.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Context
|
|
3
3
|
*/
|
|
4
|
-
import { CookiesContext, CookiesContextProvider } from
|
|
5
|
-
import { ModalContext, ModalContextProvider } from
|
|
6
|
-
import { NavContext, NavContextProvider } from
|
|
4
|
+
import { CookiesContext, CookiesContextProvider } from './context/cookies-context-provider';
|
|
5
|
+
import { ModalContext, ModalContextProvider } from './context/modal-context-provider';
|
|
6
|
+
import { NavContext, NavContextProvider } from './context/nav-context-provider';
|
|
7
7
|
export { CookiesContext, CookiesContextProvider, ModalContext, ModalContextProvider, NavContext, NavContextProvider, };
|
|
8
8
|
//# sourceMappingURL=context.d.ts.map
|