@uncinc/uncinc-react-kitchen-sink 2.14.3 → 2.15.0

package/dist/components/GoogleConsentCookieBanner/index.js

@@ -291,7 +291,9 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     }));
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classes
+    className: classes,
+    role: "region",
+    "aria-label": t('cookie.banner_label')
   }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
     className: "GoogleConsentCookieBanner__content ".concat(manualChoiceVisible ? 'GoogleConsentCookieBanner__content--full-height' : '')
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/SkipNav/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './style.scss';
+export type SkipNavProps = {
+    className?: string;
+    linkClassName?: string;
+    skipToSearch?: boolean;
+    mainContentId?: string;
+    searchId?: string;
+    skipToContentText?: string;
+    skipToSearchText?: string;
+    customLinks?: {
+        href: string;
+        text: string;
+    }[];
+};
+declare const SkipNav: React.FC<SkipNavProps>;
+export default SkipNav;

package/dist/components/SkipNav/index.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import c from 'classnames';
+import { useTranslation } from 'react-i18next';
+import './style.scss';
+var SkipNav = function SkipNav(_ref) {
+  var className = _ref.className,
+    linkClassName = _ref.linkClassName,
+    _ref$skipToSearch = _ref.skipToSearch,
+    skipToSearch = _ref$skipToSearch === void 0 ? false : _ref$skipToSearch,
+    _ref$mainContentId = _ref.mainContentId,
+    mainContentId = _ref$mainContentId === void 0 ? 'main-content' : _ref$mainContentId,
+    _ref$searchId = _ref.searchId,
+    searchId = _ref$searchId === void 0 ? 'search' : _ref$searchId,
+    skipToContentText = _ref.skipToContentText,
+    skipToSearchText = _ref.skipToSearchText,
+    _ref$customLinks = _ref.customLinks,
+    customLinks = _ref$customLinks === void 0 ? [] : _ref$customLinks;
+  var classes = c('SkipNav', className);
+  var linkClasses = c('focusable skip-link', linkClassName);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var defaultContentText = skipToContentText || t('atoms.skip_nav.skipto_content');
+  var defaultSearchText = skipToSearchText || t('atoms.skip_nav.skipto_search');
+  var links = useMemo(function () {
+    var generatedLinks = [];
+    generatedLinks.push( /*#__PURE__*/React.createElement("a", {
+      key: "skip-to".concat(mainContentId),
+      href: "#".concat(mainContentId),
+      className: linkClasses
+    }, defaultContentText));
+    if (skipToSearch) {
+      generatedLinks.push( /*#__PURE__*/React.createElement("a", {
+        key: "skip-to-search",
+        href: "#".concat(searchId),
+        className: linkClasses
+      }, defaultSearchText));
+    }
+    if (customLinks.length > 0) {
+      customLinks.forEach(function (link) {
+        var key = "".concat(link.href, "-").concat(link.text);
+        generatedLinks.push( /*#__PURE__*/React.createElement("a", {
+          key: key,
+          href: link.href,
+          className: linkClasses
+        }, link.text));
+      });
+    }
+    return generatedLinks;
+  }, [mainContentId, skipToSearch, searchId, defaultContentText, defaultSearchText, customLinks, linkClasses]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes
+  }, links);
+};
+export default SkipNav;

package/dist/components/SkipNav/style.scss

@@ -0,0 +1,17 @@
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
+
+.SkipNav {
+  .skip-link {
+    position: absolute;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  &:focus-within {
+    .skip-link {
+      position: static;
+      opacity: 1;
+    }
+  }
+}

package/dist/config/i18next/locales/nl.json

@@ -27,6 +27,7 @@
     "acceptOnlyNecessary": "Alleen noodzakelijke",
     "showDetails": "Show details",
     "hideDetails": "Verberg details",
+    "banner_label": "Cookiebanner",
     "contents": {
       "partner": "Partner",
       "description": "Beschrijving",
@@ -62,6 +63,10 @@
   "atoms": {
     "tag": {
       "delete": "Verwijder tag"
+    },
+    "skip_nav": {
+      "skipto_content": "Overslaan en naar de inhoud gaan",
+      "skipto_search": "Naar zoekfunctie"
     }
   },
   "organisms": {

package/dist/hooks/useClickOutside.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 interface UseClickOutsideOptions {
-    refs: MutableRefObject<HTMLElement>[] | MutableRefObject<HTMLElement>;
+    refs: RefObject<HTMLElement>[] | RefObject<HTMLElement>;
     unless?: boolean | ((e: globalThis.MouseEvent) => boolean);
     onClick: (e: globalThis.MouseEvent) => void;
 }

package/dist/hooks/useClickOutside.js

@@ -15,7 +15,8 @@ export default function useClickOutside(_ref) {
         return;
       }
       var isOutsideClick = refsAsArray.every(function (ref) {
-        return !ref.current.contains(e.target);
+        var _ref$current;
+        return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e.target));
       });
       if (isOutsideClick) {
         onClick(e);

package/dist/hooks/useDialogHelpers.d.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 export interface UseDialogHelpersOptions<T extends HTMLElement> {
     id?: string;
-    wrapperElement: MutableRefObject<T>;
+    wrapperElement: RefObject<T>;
     closeFunction: () => void;
     isOpen: boolean;
     disableClosers: boolean;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as Icon } from "./components/Icon";
 export { default as ImageBackground } from "./components/Image/Background";
 export { default as Lottie } from "./components/Lottie";
 export { default as LottieAnimationWithMousePosition } from "./components/Lottie/LottieAnimationWithMousePosition";
+export { default as SkipNav } from "./components/SkipNav";
 export { default as Tag } from "./components/Tag";
 export { default as WysiwygField } from "./components/WysiwygField";
 export { default as CallToAction } from "./components/CallToAction";

package/dist/index.js

@@ -10,6 +10,7 @@ export { default as Icon } from './components/Icon';
 export { default as ImageBackground } from './components/Image/Background';
 export { default as Lottie } from './components/Lottie';
 export { default as LottieAnimationWithMousePosition } from './components/Lottie/LottieAnimationWithMousePosition';
+export { default as SkipNav } from './components/SkipNav';
 export { default as Tag } from './components/Tag';
 export { default as WysiwygField } from './components/WysiwygField';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.14.3",
+  "version": "2.15.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -110,6 +110,7 @@
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@material-design-icons/svg": "^0.14.11",
+    "@storybook/addon-a11y": "^7.0.18",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",