@ndla/ui 28.0.0 → 30.0.0

package/lib/locale/messages-nb.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-nb.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: "Emneknagger {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknagger',
-    showAllTags: 'Vis alle emneknagger'
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,
@@ -890,7 +928,7 @@ var messages = _objectSpread(_objectSpread({
     error: 'En feil oppstod ved lasting av en ekstern ressurs.'
   },
   concept: {
-    showDescription: 'Vis beskrivelsen av forklaringen.',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaring.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',

package/lib/locale/messages-nn.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-nn.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultat tilgjengeleg',
+      disabled: 'utilgjengeleg',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltastar opp og ned for å velge emneknaggar',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere lista med emneknaggar',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknaggar',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høgre og venstre pil for å navigere mellom valgte emneknaggar, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjerna.',
+        clear: 'Alle valgte emneknaggar fjerna.',
+        initialFocus: "Emneknaggar {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikkje velgast. Velg eit anna alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen mulige val',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknaggar',
-    showAllTags: 'Vis alle emneknaggar'
+    hideTags: 'Skjul emneknaggar',
+    showTags: 'Vis emneknaggar'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,
@@ -890,7 +928,7 @@ var messages = _objectSpread(_objectSpread({
     error: 'Ein feil oppstod ved lasting av ein ekstern ressurs.'
   },
   concept: {
-    showDescription: 'Vis skildring av forklaringa',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaringa.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'Ein feil oppstod',

package/lib/locale/messages-se.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-se.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: "Emneknagger {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Bija fáddágilkora',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Čále fáddágilkora',
     removeTag: 'Váldde eret {{name}}',
-    hideAllTags: 'Čiega buot fáddágilkoriid',
-    showAllTags: 'Čájet buot fáddágilkoriid'
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,
@@ -890,7 +928,7 @@ var messages = _objectSpread(_objectSpread({
     error: 'Boasttuvuohta čuožžilii olgguldas resurssa viežžamis.'
   },
   concept: {
-    showDescription: 'Čájet čilgehusa govvideami.',
+    showDescription: '{{title}} ,Čájet čilgehusa govvideami.',
     reuse: 'Geavat čilgehusa',
     error: {
       title: 'Boasttuvuohta čuožžilii',

package/lib/locale/messages-sma.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-sma.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: "Emneknagger {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknagger',
-    showAllTags: 'Vis alle emneknagger'
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,
@@ -890,7 +928,7 @@ var messages = _objectSpread(_objectSpread({
     error: 'En feil oppstod ved lasting av en ekstern ressurs.'
   },
   concept: {
-    showDescription: 'Vis beskrivelsen av forklaringen.',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaring.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',

package/lib/utils/createUniversalPortal.d.ts

@@ -6,4 +6,4 @@
  *
  */
 import { ReactNode } from 'react';
-export declare function createUniversalPortal(children: ReactNode, selector: string): JSX.Element;
+export declare function createUniversalPortal(children: ReactNode, selector: string): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/lib/utils/createUniversalPortal.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,7 +27,7 @@ function canUseDOM() {
 
 function createUniversalPortal(children, selector) {
   if (!canUseDOM()) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       "data-react-universal-portal": true
     }, children);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "28.0.0",
+  "version": "30.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.6.1",
-    "@ndla/carousel": "^1.2.23",
-    "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.5",
+    "@ndla/button": "^4.0.0",
+    "@ndla/carousel": "^2.0.0",
+    "@ndla/core": "^3.0.0",
+    "@ndla/forms": "^4.0.0",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.13.0",
-    "@ndla/licenses": "^5.0.17",
-    "@ndla/modal": "^1.6.0",
-    "@ndla/notion": "^3.1.47",
-    "@ndla/safelink": "^2.2.19",
-    "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.22",
-    "@ndla/tooltip": "^2.2.1",
+    "@ndla/icons": "^2.0.0",
+    "@ndla/licenses": "^6.0.0",
+    "@ndla/modal": "^2.0.0",
+    "@ndla/notion": "^4.0.0",
+    "@ndla/safelink": "^3.0.0",
+    "@ndla/switch": "^1.0.0",
+    "@ndla/tabs": "^2.0.0",
+    "@ndla/tooltip": "^3.0.0",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
     "@reach/menu-button": "^0.16.2",
@@ -58,18 +58,19 @@
     "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.1.2",
+    "react-select": "^5.4.0",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^2.5.3",
     "remarkable": "^2.0.1",
     "shave": "^2.5.10"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.9",
-    "i18next": "^20.3.1",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "i18next": "^21.9.2",
     "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
-    "react-i18next": "^11.11.0",
+    "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
@@ -85,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f7cac264e9855369dc3061fc240ece485de041bb"
+  "gitHead": "7f4578ae15653f2f6a1efde17d24991e77f026bc"
 }

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -11,7 +11,7 @@ import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { mq, spacing, breakpoints } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;

package/src/ComponentCursor/ComponentCursor.tsx

@@ -1,6 +1,6 @@
 import React, { MutableRefObject, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useComponentSize } from '@ndla/hooks';
 import { breakpoints, mq } from '@ndla/core';
 

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import React, { useEffect, useState, MouseEvent } from 'react';
 
 import styled from '@emotion/styled';
 import { Link } from '@ndla/icons/common';
@@ -44,20 +44,23 @@ interface Props {
   hydrate?: boolean;
 }
 
-interface WrapperProps {
+interface CopyButtonProps {
   title: string;
-  hydrate?: boolean;
-  children: ReactNode;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  tooltip: string;
+  content?: string | null;
 }
 
-const WrapperComponent = ({ title, hydrate, children }: WrapperProps) => {
-  if (hydrate) {
-    return <>{children}</>;
-  }
+const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
   return (
-    <ContainerDiv data-header-copy-container data-title={title}>
-      {children}
-    </ContainerDiv>
+    <>
+      <IconButton onClick={onClick} data-title={title}>
+        <Tooltip tooltip={tooltip}>
+          <Link title={''} />
+        </Tooltip>
+      </IconButton>
+      <h2 id={title} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }} />
+    </>
   );
 };
 
@@ -86,15 +89,14 @@ const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
   const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
   const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
 
+  if (hydrate) {
+    return <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />;
+  }
+
   return (
-    <WrapperComponent hydrate={hydrate} title={title}>
-      <IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
-        <Tooltip tooltip={tooltip}>
-          <Link title={''} />
-        </Tooltip>
-      </IconButton>
-      <h2 id={sanitizedTitle} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }}></h2>
-    </WrapperComponent>
+    <ContainerDiv data-header-copy-container data-title={title}>
+      <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />
+    </ContainerDiv>
   );
 };
 

package/src/Filter/FilterCarousel.tsx

@@ -9,7 +9,7 @@
 import React, { ReactChild, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
 import { useSwipeable } from 'react-swipeable';
 

package/src/Frontpage/FrontpageFilm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Forward } from '@ndla/icons/common';
 import { withTranslation, WithTranslation } from 'react-i18next';

package/src/Frontpage/illustrations/FrontpageSubjectIllustration.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const cssStyle = css`
   position: relative;