@ndla/ui 30.9.0 → 32.0.0

package/lib/types.d.ts

@@ -7,18 +7,18 @@
  */
 import { ReactNode } from 'react';
 declare const locales: readonly ["nb", "nn", "en", "se"];
-export declare type Locale = typeof locales[number];
-export declare type Link = {
+export type Locale = typeof locales[number];
+export type Link = {
     text: string;
     to: string;
 };
-export declare type Messages = {
+export type Messages = {
     closeSearchLabel: string;
 };
-declare type ResourceTypes = {
+type ResourceTypes = {
     name: string;
 };
-export declare type Resource = {
+export type Resource = {
     id: string;
     name: string;
     contentUri?: string;
@@ -62,7 +62,7 @@ export interface Article {
     copyright: Copyright;
     published: string;
 }
-export declare type SearchResult = {
+export type SearchResult = {
     title: string;
     contentType: string;
     resources: Array<Resource>;
@@ -72,22 +72,22 @@ export interface ContentTypeResultType {
     contentType?: string;
     resources: Array<Resource>;
 }
-export declare type subjectProp = {
+export type subjectProp = {
     text: string;
     url: string;
     yearInfo?: string;
     beta?: boolean;
 };
-export declare type category = {
+export type category = {
     name: string;
     subjects: Array<subjectProp>;
 };
-export declare type elementRectType = {
+export type elementRectType = {
     fromX: number;
     fromY: number;
     fromScale: number;
 };
-export declare type CompetenceGoalsItemType = {
+export type CompetenceGoalsItemType = {
     id: string;
     title: string;
     goals: {
@@ -98,7 +98,7 @@ export declare type CompetenceGoalsItemType = {
     selected?: boolean;
     isOembed?: boolean;
 };
-export declare type NotionMedia = {
+export type NotionMedia = {
     type: 'video' | 'other';
     element: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.9.0",
+  "version": "32.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.11",
-    "@ndla/button": "^6.0.4",
+    "@ndla/article-scripts": "^3.0.12",
+    "@ndla/button": "^6.0.5",
     "@ndla/carousel": "^2.0.8",
     "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.0.16",
-    "@ndla/hooks": "^1.1.15",
+    "@ndla/forms": "^4.0.17",
+    "@ndla/hooks": "^1.1.16",
     "@ndla/icons": "^2.0.8",
     "@ndla/licenses": "^6.0.10",
     "@ndla/modal": "^2.1.3",
-    "@ndla/notion": "^4.0.18",
-    "@ndla/safelink": "^3.0.16",
+    "@ndla/notion": "^4.0.19",
+    "@ndla/safelink": "^3.0.17",
     "@ndla/switch": "^1.0.3",
-    "@ndla/tabs": "^2.0.11",
+    "@ndla/tabs": "^2.0.12",
     "@ndla/tooltip": "^3.0.6",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
@@ -53,7 +53,6 @@
     "html-react-parser": "^0.14.1",
     "i18next-browser-languagedetector": "^6.1.1",
     "invariant": "^2.2.3",
-    "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.1.2",
     "react-select": "^5.4.0",
@@ -66,6 +65,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "i18next": "^21.9.2",
+    "lodash": "^4.17.20",
     "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
     "react-i18next": "^11.18.6",
@@ -84,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "68b1327bb5950eee8a41227b3b48589c7d428bd7"
+  "gitHead": "1cc4d04cd592bdf11d2d50082cd7a4bf77a5b2a6"
 }

package/src/Animation/DisplayOnPageYOffset.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import Fade from './Fade';
 
 interface Props {

package/src/Article/Article.tsx

@@ -8,7 +8,7 @@
 
 import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { isString } from 'lodash';
+import isString from 'lodash/isString';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 

package/src/Filter/FilterListPhone.tsx

@@ -10,7 +10,7 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
 import ToggleItem from './ToggleItem';
 import ActiveFilters from '../Search/ActiveFilters';

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -10,7 +10,7 @@ import React, { Fragment, RefObject, useEffect, useRef, useState } from 'react';
 import { isIE, browserVersion } from 'react-device-detect';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { makeSrcQueryString } from '../Image';

package/src/ResourceBox/ResourceBox.tsx

@@ -8,7 +8,6 @@
  */
 import React from 'react';
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
@@ -90,10 +89,10 @@ interface Props {
   title: string;
   caption: string;
   url: string;
+  buttonText: string;
 }
 
-export const ResourceBox = ({ image, title, caption, url }: Props) => {
-  const { t } = useTranslation();
+export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {
   return (
     <ResourceBoxContainer>
       <StyledImage src={image.src} alt={image.alt} />
@@ -102,7 +101,7 @@ export const ResourceBox = ({ image, title, caption, url }: Props) => {
         <Caption>{caption}</Caption>
 
         <StyledButton to={url} target="_blank" outline borderShape="rounded">
-          {t('license.other.itemImage.ariaLabel')}
+          {buttonText}
           <Launch aria-hidden />
         </StyledButton>
       </ContentWrapper>

package/src/TopicMenu/TopicMenu.jsx

@@ -12,7 +12,7 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { spacing } from '@ndla/core';
 import styled from '@emotion/styled';
 

package/src/TreeStructure/AddFolderButton.tsx

@@ -12,11 +12,11 @@ import Tooltip from '@ndla/tooltip';
 import styled from '@emotion/styled';
 import { ButtonV2 as Button } from '@ndla/button';
 import { Plus } from '@ndla/icons/action';
-import { FolderType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
 
 interface AddFolderButtonProps {
   canAddFolder: boolean;
-  focusedFolder?: FolderType;
+  focusedFolder?: IFolder;
   setNewFolderParentId: (id?: string) => void;
   setShowTree: (value: boolean) => void;
   loading?: boolean;

package/src/TreeStructure/ComboboxButton.tsx

@@ -11,9 +11,10 @@ import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
+import { IFolder } from '@ndla/types-learningpath-api';
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
 import { treestructureId } from './helperFunctions';
-import { FolderType, TreeStructureType } from './types';
+import { TreeStructureType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import ContentLoader from '../ContentLoader';
 
@@ -52,15 +53,15 @@ interface Props {
   showTree: boolean;
   type: TreeStructureType;
   label?: string;
+  focusedFolder?: IFolder;
+  selectedFolder?: IFolder;
+  setSelectedFolder: (folder: IFolder) => void;
   loading?: boolean;
-  focusedFolder?: FolderType;
-  selectedFolder?: FolderType;
-  setSelectedFolder: (folder: FolderType) => void;
   onToggleTree: (open: boolean) => void;
-  flattenedFolders: FolderType[];
+  flattenedFolders: IFolder[];
   onOpenFolder: (id: string) => void;
   onCloseFolder: (id: string) => void;
-  setFocusedFolder: (folder: FolderType) => void;
+  setFocusedFolder: (folder: IFolder) => void;
   ariaDescribedby?: string;
 }
 

package/src/TreeStructure/FolderItem.tsx

@@ -14,7 +14,8 @@ import { Done } from '@ndla/icons/editor';
 import { ButtonV2 as Button } from '@ndla/button';
 import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { CommonFolderItemsProps, FolderType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { CommonFolderItemsProps } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';
 
@@ -104,8 +105,9 @@ const FolderNameLink = styled(SafeLink, { shouldForwardProp })<FolderNameProps>`
 
 interface Props extends CommonFolderItemsProps {
   isOpen: boolean;
-  folder: FolderType;
+  folder: IFolder;
   isCreatingFolder?: boolean;
+  index: number;
 }
 
 const FolderItem = ({
@@ -125,9 +127,10 @@ const FolderItem = ({
   isCreatingFolder,
   type,
   closeTree,
+  index,
 }: Props) => {
   const { t } = useTranslation();
-  const { id, name, isNavigation } = folder;
+  const { id, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder ? selectedFolder.id === id : false;
 
@@ -159,17 +162,17 @@ const FolderItem = ({
     }
   }, [focusedFolder, ref, id, isCreatingFolder, type]);
 
-  const linkPath = `/minndla${!isNavigation ? '/folders' : ''}/${id}`;
+  const linkPath = `/minndla/folders/${id}`;
 
   const containsResource =
     targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
 
   const emptyFolder = folder.subfolders.length === 0;
-
   const isMaxDepth = level > maxLevel;
-
   const hideArrow = isMaxDepth || emptyFolder;
 
+  const tabable = selected || focused || (!focusedFolder && !folder.parentId && index === 0);
+
   return type === 'navigation' ? (
     <FolderNameLink
       role="treeitem"
@@ -187,7 +190,7 @@ const FolderItem = ({
         arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
       }}
       to={loading ? '' : linkPath}
-      tabIndex={selected || focused ? 0 : -1}
+      tabIndex={tabable ? 0 : -1}
       selected={selected}
       onFocus={() => setFocusedFolder(folder)}
       onClick={handleClickFolder}>

package/src/TreeStructure/FolderItems.tsx

@@ -9,9 +9,9 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
+import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItem from './FolderItem';
-import { CommonFolderItemsProps, FolderType, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
-import NavigationLink from './NavigationLink';
+import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
 import { treestructureId } from './helperFunctions';
 
 const StyledUL = styled.ul`
@@ -38,11 +38,11 @@ const StyledLI = styled.li<StyledLiProps>`
 `;
 
 export interface FolderItemsProps extends CommonFolderItemsProps {
-  folders: FolderType[];
+  folders: IFolder[];
   newFolderParentId: string | undefined;
   onCancelNewFolder: () => void;
   openFolders: string[];
-  parentFolder?: FolderType;
+  parentFolder?: IFolder;
   children?: ReactNode;
   onCreate: OnCreatedFunc;
   newFolderInput?: NewFolderInputFunc;
@@ -74,44 +74,39 @@ const FolderItems = ({
     aria-labelledby={level === 0 && type === 'picker' ? treestructureId(type, 'label') : undefined}
     role={level === 0 ? 'tree' : 'group'}>
     {children}
-    {folders.map((folder) => {
+    {folders.map((folder, index) => {
       const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
 
       return (
         <StyledLI key={id} tabIndex={-1} role="none" type={type}>
-          {folder.isNavigation ? (
-            <NavigationLink folder={folder} isOpen={isOpen} level={level} type={type} loading={loading} {...rest} />
-          ) : (
-            <>
-              <FolderItem
-                folder={folder}
-                isOpen={isOpen}
-                level={level}
-                loading={loading}
-                type={type}
-                isCreatingFolder={!!newFolderParentId}
-                {...rest}
-              />
-              {((subfolders && isOpen) || newFolderParentId === id) && (
-                <FolderItems
-                  parentFolder={folder}
-                  folders={subfolders}
-                  level={level + 1}
-                  loading={loading}
-                  type={type}
-                  newFolderParentId={newFolderParentId}
-                  onCancelNewFolder={onCancelNewFolder}
-                  openFolders={openFolders}
-                  newFolderInput={newFolderInput}
-                  onCreate={onCreate}
-                  {...rest}>
-                  {newFolderParentId === id && (
-                    <li role="none">{newFolderInput?.({ parentId: id, onClose: onCancelNewFolder, onCreate })}</li>
-                  )}
-                </FolderItems>
+          <FolderItem
+            index={index}
+            folder={folder}
+            isOpen={isOpen}
+            level={level}
+            loading={loading}
+            type={type}
+            isCreatingFolder={!!newFolderParentId}
+            {...rest}
+          />
+          {((subfolders && isOpen) || newFolderParentId === id) && (
+            <FolderItems
+              parentFolder={folder}
+              folders={subfolders}
+              level={level + 1}
+              loading={loading}
+              type={type}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              openFolders={openFolders}
+              newFolderInput={newFolderInput}
+              onCreate={onCreate}
+              {...rest}>
+              {newFolderParentId === id && (
+                <li role="none">{newFolderInput?.({ parentId: id, onClose: onCancelNewFolder, onCreate })}</li>
               )}
-            </>
+            </FolderItems>
           )}
         </StyledLI>
       );

package/src/TreeStructure/TreeStructure.tsx

@@ -10,11 +10,11 @@ import React, { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
 import { css } from '@emotion/react';
-import { uniq } from 'lodash';
+import uniq from 'lodash/uniq';
 import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItems from './FolderItems';
 import { flattenFolders, treestructureId } from './helperFunctions';
-import { CommonTreeStructureProps, FolderType, NewFolderInputFunc, TreeStructureType } from './types';
+import { CommonTreeStructureProps, NewFolderInputFunc, TreeStructureType } from './types';
 import ComboboxButton from './ComboboxButton';
 import AddFolderButton from './AddFolderButton';
 
@@ -69,7 +69,7 @@ const ScrollableDiv = styled.div<ScrollableDivProps>`
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
-  folders: FolderType[];
+  folders: IFolder[];
   label?: string;
   maxLevel?: number;
   newFolderInput?: NewFolderInputFunc;
@@ -96,8 +96,8 @@ const TreeStructure = ({
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
 
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
-  const [focusedFolder, _setFocusedFolder] = useState<FolderType | undefined>();
-  const [selectedFolder, _setSelectedFolder] = useState<FolderType | undefined>();
+  const [focusedFolder, _setFocusedFolder] = useState<IFolder | undefined>();
+  const [selectedFolder, _setSelectedFolder] = useState<IFolder | undefined>();
   const [showTree, setShowTree] = useState(type === 'navigation');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
@@ -133,12 +133,12 @@ const TreeStructure = ({
     }
   };
 
-  const setSelectedFolder = (folder: FolderType) => {
+  const setSelectedFolder = (folder: IFolder) => {
     _setSelectedFolder(folder);
     onSelectFolder?.(folder.id);
   };
 
-  const setFocusedFolder = (folder: FolderType) => {
+  const setFocusedFolder = (folder: IFolder) => {
     _setFocusedFolder(folder);
     setNewFolderParentId(undefined);
 

package/src/TreeStructure/arrowNavigation.ts

@@ -6,13 +6,13 @@
  *
  */
 
+import { IFolder } from '@ndla/types-learningpath-api';
 import { KeyboardEvent } from 'react';
-import { FolderType } from './types';
 
 const navigateVertical = (
-  visibleFolders: FolderType[],
+  visibleFolders: IFolder[],
   folderId: string,
-  setFocusedFolderId: (id: FolderType) => void,
+  setFocusedFolderId: (id: IFolder) => void,
   direction: 1 | -1,
 ) => {
   const currentIndex = visibleFolders.findIndex((folder) => folder.id === folderId);
@@ -27,8 +27,8 @@ const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'];
 export const arrowNavigation = (
   e: KeyboardEvent<HTMLElement>,
   id: string,
-  visibleFolders: FolderType[],
-  setFocusedFolderId: (id: FolderType) => void,
+  visibleFolders: IFolder[],
+  setFocusedFolderId: (id: IFolder) => void,
   onOpen: (id: string) => void,
   onClose: (id: string) => void,
 ) => {

package/src/TreeStructure/helperFunctions.ts

@@ -1,12 +1,13 @@
-import { FolderType, TreeStructureType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { TreeStructureType } from './types';
 
-export const flattenFolders = (folders: FolderType[], openFolders?: string[]): FolderType[] => {
+export const flattenFolders = (folders: IFolder[], openFolders?: string[]): IFolder[] => {
   return folders.reduce((acc, { subfolders, id, ...rest }) => {
     if (!subfolders || (openFolders && !openFolders.includes(id))) {
       return acc.concat({ subfolders, id, ...rest });
     }
     return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
-  }, [] as FolderType[]);
+  }, [] as IFolder[]);
 };
 
 export const treestructureId = (type: TreeStructureType, modifier: string) => {

package/src/TreeStructure/index.ts

@@ -7,6 +7,5 @@
  */
 
 import TreeStructure from './TreeStructure';
-export type { FolderType } from './types';
 export type { TreeStructureProps } from './TreeStructure';
 export { TreeStructure };

package/src/TreeStructure/types.ts

@@ -9,11 +9,6 @@
 import { ReactNode } from 'react';
 import { IFolder, IResource } from '@ndla/types-learningpath-api';
 
-export interface FolderType extends IFolder {
-  icon?: ReactNode;
-  isNavigation?: boolean;
-}
-
 export type TreeStructureType = 'navigation' | 'picker';
 
 export type OnCreatedFunc = (folder: IFolder | undefined, parentId: string) => void;
@@ -35,14 +30,14 @@ export interface CommonTreeStructureProps {
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
-  focusedFolder?: FolderType;
+  focusedFolder?: IFolder;
   level: number;
   maxLevel: number;
-  selectedFolder?: FolderType;
+  selectedFolder?: IFolder;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;
-  setFocusedFolder: (folder: FolderType) => void;
-  setSelectedFolder: (folder: FolderType) => void;
-  visibleFolders: FolderType[];
+  setFocusedFolder: (folder: IFolder) => void;
+  setSelectedFolder: (folder: IFolder) => void;
+  visibleFolders: IFolder[];
   closeTree: () => void;
 }

package/src/User/parseUserObject.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { groupBy } from 'lodash';
+import groupBy from 'lodash/groupBy';
 import { FeideGoGroup, FeideGrep, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
 
 type GoGroupType = 'basic' | 'teaching' | 'other';

package/src/index.ts

@@ -251,7 +251,7 @@ export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from './SnackB
 export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
-export type { FolderType, TreeStructureProps } from './TreeStructure';
+export type { TreeStructureProps } from './TreeStructure';
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';

package/es/LetterFilter/LetterFilter.stories.js

@@ -1,44 +0,0 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useArgs } from '@storybook/client-api';
-import React from 'react';
-import { defaultParameters } from '../../../designmanual/stories/defaults';
-import LetterFilter from './LetterFilter';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export default {
-  title: 'Enkle komponenter/LetterFilter',
-  component: LetterFilter,
-  parameters: _objectSpread({}, defaultParameters),
-  args: {
-    enabledLetters: ['a', 'c'],
-    onChange: function onChange(value) {}
-  }
-};
-export var LetterFilterStory = function LetterFilterStory(args) {
-  var _useArgs = useArgs(),
-    _useArgs2 = _slicedToArray(_useArgs, 2),
-    updateArgs = _useArgs2[1];
-  return _jsx(LetterFilter, _objectSpread(_objectSpread({}, args), {}, {
-    onChange: function onChange(val) {
-      return updateArgs({
-        value: val
-      });
-    }
-  }));
-};
-LetterFilterStory.storyName = 'LetterFilter';