@ndla/ui 25.3.0 → 26.1.0

package/src/TreeStructure/NavigationLink.tsx

@@ -0,0 +1,100 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import SafeLink from '@ndla/safelink';
+import { arrowNavigation } from './arrowNavigation';
+import { CommonFolderItemsProps, FolderType } from './types';
+
+interface StyledProps {
+  selected?: boolean;
+}
+
+const StyledSafeLink = styled(SafeLink)<StyledProps>`
+  display: grid;
+  grid-template-columns: ${spacing.medium} 1fr;
+  align-items: center;
+  padding: ${spacing.xxsmall};
+  margin: ${spacing.xsmall} 0;
+  gap: ${spacing.xxsmall};
+  box-shadow: none;
+
+  color: ${({ selected }) => (selected ? colors.brand.primary : colors.text.primary)};
+  font-weight: ${({ selected }) => (selected ? fonts.weight.semibold : fonts.weight.normal)};
+  ${fonts.sizes('16px')};
+
+  :hover,
+  :focus {
+    color: ${colors.brand.primary};
+  }
+  svg {
+    height: 26px;
+    width: 26px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface Props extends CommonFolderItemsProps {
+  isOpen: boolean;
+  folder: FolderType;
+}
+
+const NavigationLink = ({
+  loading,
+  folder,
+  selectedFolder,
+  focusedFolderId,
+  setSelectedFolder,
+  setFocusedId,
+  visibleFolders,
+  onOpenFolder,
+  onCloseFolder,
+}: Props) => {
+  const { id, icon, name } = folder;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const focused = focusedFolderId === id;
+
+  const handleClick = () => {
+    if (!selected) {
+      setSelectedFolder(folder);
+      setFocusedId(id);
+    }
+  };
+
+  useEffect(() => {
+    if (focusedFolderId === id) {
+      ref.current?.focus();
+    }
+  }, [focusedFolderId, ref, id]);
+
+  return (
+    <StyledSafeLink
+      ref={ref}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
+      }
+      tabIndex={selected || focused ? 0 : -1}
+      selected={selected}
+      onFocus={() => setFocusedId(id)}
+      onClick={handleClick}
+      to={loading ? '' : `/minndla/${id}`}>
+      <IconWrapper>{icon}</IconWrapper>
+      {name}
+    </StyledSafeLink>
+  );
+};
+
+export default NavigationLink;

package/src/TreeStructure/TreeStructure.tsx

@@ -6,18 +6,20 @@
  *
  */
 
-import React, { useEffect, useState, useMemo } from 'react';
-import { AddButton } from '@ndla/button';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { ButtonV2 as Button, IconButtonDualStates } from '@ndla/button';
+import { Plus } from '@ndla/icons/action';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { spacing, fonts } from '@ndla/core';
+import { colors, fonts, misc, spacing } from '@ndla/core';
+import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
-import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
 import { flattenFolders } from './helperFunctions';
-import { CommonTreeStructureProps, FolderType } from './types';
+import { CommonTreeStructureProps, FolderType, TreeStructureType } from './types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -25,15 +27,86 @@ const StyledLabel = styled.label`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const AddFolderWrapper = styled.div`
+interface StyledRowProps {
+  isOpen: boolean;
+}
+
+const StyledRow = styled.div<StyledRowProps>`
+  display: flex;
+  justify-content: space-between;
+  padding: ${spacing.xxsmall};
+  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
+`;
+
+const StyledTreeStructure = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
   display: flex;
-  margin-top: ${spacing.xsmall};
+  flex-direction: column;
+  ${({ type }) =>
+    (type === 'normal' || type === 'picker') &&
+    css`
+      overflow: hidden;
+      border: 1px solid ${colors.brand.neutral7};
+      border-radius: ${misc.borderRadius};
+      scroll-behavior: smooth;
+    `}
+  transition: ${misc.transition.default};
+  &:focus-within {
+    border-color: ${colors.brand.tertiary};
+  }
+`;
+interface ScrollableDivProps {
+  type: TreeStructureType;
+}
+const ScrollableDiv = styled.div<ScrollableDivProps>`
+  ${({ type }) =>
+    (type === 'picker' || type === 'normal') &&
+    css`
+      overflow: overlay;
+      ::-webkit-scrollbar {
+        width: ${spacing.small};
+      }
+      ::-webkit-scrollbar-thumb {
+        border: 4px solid transparent;
+        border-radius: 14px;
+        background-clip: padding-box;
+        padding: 0 4px;
+        background-color: ${colors.brand.neutral7};
+      }
+    `}
+`;
+
+const StyledSelectedFolder = styled(Button)`
+  flex: 1;
+  justify-content: flex-start;
+  :hover,
+  :focus {
+    background: none;
+    box-shadow: none;
+    border-color: transparent;
+  }
+`;
+
+const StyledAddFolderButton = styled(Button)`
+  &,
+  &:disabled {
+    border-color: transparent;
+  }
+`;
+
+const StyledPlus = styled(Plus)`
+  height: 24px;
+  width: 24px;
 `;
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
-  editable?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
@@ -41,10 +114,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
 
 const TreeStructure = ({
   defaultOpenFolders,
-  editable,
-  menuItems,
   folders,
-  framed,
   label,
   loading,
   maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
@@ -52,9 +122,12 @@ const TreeStructure = ({
   onSelectFolder,
   openOnFolderClick,
   targetResource,
+  type = 'normal',
 }: TreeStructureProps) => {
   const { t } = useTranslation();
 
+  const ref = useRef<HTMLDivElement>(null);
+
   const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
 
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
@@ -62,10 +135,25 @@ const TreeStructure = ({
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [focusedId, setFocusedId] = useState<string | undefined>();
   const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
+  const [showTree, setShowTree] = useState(type !== 'picker');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
   const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (e.target instanceof Element && ref.current && !ref.current.contains(e.target)) {
+        setShowTree(false);
+      }
+    };
+    if (type === 'picker') {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [ref, type]);
+
   useEffect(() => {
     if (defaultOpenFolders) {
       if (!defaultOpenFolders.every((element) => openFolders.includes(element))) {
@@ -77,6 +165,10 @@ const TreeStructure = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultOpenFolders]);
 
+  useEffect(() => {
+    setNewFolderParentId(undefined);
+  }, [selectedFolder]);
+
   useEffect(() => {
     if (defaultSelectedFolderId !== undefined) {
       const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
@@ -114,9 +206,9 @@ const TreeStructure = ({
   };
 
   const onSaveNewFolder = (name: string, parentId: string) => {
-    setNewFolderParentId(undefined);
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
+        setNewFolderParentId?.(undefined);
         setSelectedFolder(newFolder);
         onSelectFolder?.(newFolder.id);
         setFocusedId(newFolder.id);
@@ -126,60 +218,94 @@ const TreeStructure = ({
   };
 
   const onCancelNewFolder = () => {
-    setNewFolderParentId(undefined);
+    setNewFolderParentId?.(undefined);
   };
 
-  const canAddFolder =
-    editable && selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
+  const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div>
+    <StyledTreeStructure ref={ref}>
       {label && <StyledLabel>{label}</StyledLabel>}
-      <TreeStructureStyledWrapper aria-label="Menu tree" role="tree" framed={framed}>
-        <FolderItems
-          editable={editable}
-          focusedFolderId={focusedId}
-          menuItems={menuItems}
-          folders={folders}
-          level={0}
-          loading={loading}
-          selectedFolder={selectedFolder}
-          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
-          newFolderParentId={newFolderParentId}
-          onCancelNewFolder={onCancelNewFolder}
-          onCloseFolder={onCloseFolder}
-          onOpenFolder={onOpenFolder}
-          onSaveNewFolder={onSaveNewFolder}
-          onSelectFolder={onSelectFolder}
-          openFolders={openFolders}
-          openOnFolderClick={openOnFolderClick}
-          setFocusedId={setFocusedId}
-          setSelectedFolder={setSelectedFolder}
-          targetResource={targetResource}
-          visibleFolders={visibleFolderIds}
-          framed={framed}
-        />
-      </TreeStructureStyledWrapper>
-      {editable && (
-        <AddFolderWrapper>
-          <Tooltip
-            tooltip={
-              canAddFolder
-                ? t('myNdla.newFolderUnder', {
-                    folderName: selectedFolder?.name,
-                  })
-                : t('treeStructure.maxFoldersAlreadyAdded')
-            }>
-            <AddButton
-              disabled={!canAddFolder}
-              aria-label={t('myNdla.newFolder')}
-              onClick={() => setNewFolderParentId(selectedFolder?.id)}>
-              {t('myNdla.newFolder')}
-            </AddButton>
-          </Tooltip>
-        </AddFolderWrapper>
-      )}
-    </div>
+      <TreeStructureWrapper aria-label={label} type={type}>
+        {type === 'picker' && (
+          <StyledRow isOpen={showTree}>
+            <StyledSelectedFolder
+              variant="ghost"
+              colorTheme="light"
+              fontWeight="normal"
+              shape="sharp"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}>
+              {selectedFolder?.name}
+            </StyledSelectedFolder>
+            {onNewFolder && showTree && (
+              <Tooltip
+                tooltip={
+                  canAddFolder
+                    ? t('myNdla.newFolderUnder', {
+                        folderName: selectedFolder?.name,
+                      })
+                    : t('treeStructure.maxFoldersAlreadyAdded')
+                }>
+                <StyledAddFolderButton
+                  variant="outline"
+                  shape="pill"
+                  disabled={!canAddFolder}
+                  aria-label={
+                    canAddFolder
+                      ? t('myNdla.newFolderUnder', {
+                          folderName: selectedFolder?.name,
+                        })
+                      : t('treeStructure.maxFoldersAlreadyAdded')
+                  }
+                  onClick={() => setNewFolderParentId(selectedFolder?.id)}>
+                  <StyledPlus /> {t('myNdla.newFolder')}
+                </StyledAddFolderButton>
+              </Tooltip>
+            )}
+            <IconButtonDualStates
+              ariaLabelActive={t('treeStructure.hideFolders')}
+              ariaLabelInActive={t('treeStructure.showFolders')}
+              active={showTree}
+              variant="ghost"
+              colorTheme="greyLighter"
+              inactiveIcon={<ChevronDown />}
+              activeIcon={<ChevronUp />}
+              size="small"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}
+            />
+          </StyledRow>
+        )}
+        {showTree && (
+          <ScrollableDiv type={type}>
+            <FolderItems
+              focusedFolderId={focusedId}
+              folders={folders}
+              level={0}
+              loading={loading}
+              selectedFolder={selectedFolder}
+              maxLevel={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              onSelectFolder={onSelectFolder}
+              openFolders={openFolders}
+              openOnFolderClick={openOnFolderClick}
+              setFocusedId={setFocusedId}
+              setSelectedFolder={setSelectedFolder}
+              targetResource={targetResource}
+              visibleFolders={visibleFolderIds}
+              type={type}
+            />
+          </ScrollableDiv>
+        )}
+      </TreeStructureWrapper>
+    </StyledTreeStructure>
   );
 };
 

package/src/TreeStructure/types.ts

@@ -12,8 +12,11 @@ import { MenuItemProps } from '@ndla/button';
 
 export interface FolderType extends IFolder {
   icon?: ReactNode;
+  isNavigation?: boolean;
 }
 
+export type TreeStructureType = 'normal' | 'navigation' | 'picker';
+
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
   onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
@@ -22,14 +25,15 @@ export interface CommonTreeStructureProps {
   loading?: boolean;
   onSelectFolder?: (id: string) => void;
   openOnFolderClick?: boolean;
-  menuItems?: TreeStructureMenuProps[];
   targetResource?: IResource;
   framed?: boolean;
+  type: TreeStructureType;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
   focusedFolderId?: string;
   level: number;
+  maxLevel: number;
   selectedFolder?: FolderType;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;

package/src/locale/messages-en.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Edit foldername',
       delete: 'Delete',
     },
+    hideFolders: 'Hide all folders',
+    showFolders: 'Show all folders',
     createFolder: 'Create folder',
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
@@ -992,6 +994,7 @@ const messages = {
       edit: 'Edit folder',
       missingName: 'Folder name required',
       folderDeleted: '"{{folderName}}" deleted',
+      folderCreated: '"{{folderName}} created',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',

package/src/locale/messages-nb.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenavn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -990,6 +992,7 @@ const messages = {
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet',
+      folderCreated: '"{{folderName}}" er opprettet',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

package/src/locale/messages-nn.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenamn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -991,6 +993,7 @@ const messages = {
       edit: 'Rediger mappe',
       missingName: 'Skriv namn på mappe',
       folderDeleted: '"{{folderName}}" er sletta',
+      folderCreated: '"{{folderName}}" er oppretta',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',

package/src/locale/messages-se.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Rievdat máhpa nama',
       delete: 'Sihko',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Ráhkat máhpa',
     maxFoldersAlreadyAdded: 'Vuollemáhpaid badjerádji lea olahuvvon',
     newFolder: {
@@ -991,6 +993,7 @@ const messages = {
       edit: 'Redigere',
       missingName: 'Čále nama máhppii',
       folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
+      folderCreated: '"{{folderName}}" er oppretta',
     },
     tags: '{{count}} fáddágilkor',
     tags_plural: '{{count}} fáddágilkorat',

package/src/locale/messages-sma.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenavn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -991,6 +993,7 @@ const messages = {
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet',
+      folderCreated: '"{{folderName}}" er oppretta',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

package/es/TreeStructure/TreeStructureWrapper.js

@@ -1,13 +0,0 @@
-import _styled from "@emotion/styled-base";
-import { css } from '@emotion/core';
-import { colors, misc, spacing } from '@ndla/core';
-
-var TreeStructureWrapper = _styled("div", {
-  target: "ez53f4u0",
-  label: "TreeStructureWrapper"
-})("padding:", spacing.xsmall, ";", function (_ref) {
-  var framed = _ref.framed;
-  return framed && /*#__PURE__*/css("border:1px solid ", colors.brand.neutral7, ";border-radius:", misc.borderRadius, ";max-height:400px;overflow-y:scroll;scroll-behavior:smooth;padding:", spacing.small, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQk8iLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-}, " transition:", misc.transition["default"], ";&:focus-within{border-color:", colors.brand.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkQiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-
-export default TreeStructureWrapper;

package/lib/TreeStructure/TreeStructureWrapper.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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.
- *
- */
-/// <reference types="react" />
-declare const TreeStructureWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    framed?: boolean | undefined;
-}, object>;
-export default TreeStructureWrapper;

package/lib/TreeStructure/TreeStructureWrapper.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
-
-var _core = require("@emotion/core");
-
-var _core2 = require("@ndla/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var TreeStructureWrapper = (0, _styledBase["default"])("div", {
-  target: "ez53f4u0",
-  label: "TreeStructureWrapper"
-})("padding:", _core2.spacing.xsmall, ";", function (_ref) {
-  var framed = _ref.framed;
-  return framed && /*#__PURE__*/(0, _core.css)("border:1px solid ", _core2.colors.brand.neutral7, ";border-radius:", _core2.misc.borderRadius, ";max-height:400px;overflow-y:scroll;scroll-behavior:smooth;padding:", _core2.spacing.small, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQk8iLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-}, " transition:", _core2.misc.transition["default"], ";&:focus-within{border-color:", _core2.colors.brand.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkQiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-var _default = TreeStructureWrapper;
-exports["default"] = _default;

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -1,31 +0,0 @@
-/**
- * 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 styled from '@emotion/styled';
-import { css } from '@emotion/core';
-import { colors, misc, spacing } from '@ndla/core';
-
-const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
-  padding: ${spacing.xsmall};
-  ${({ framed }) =>
-    framed &&
-    css`
-      border: 1px solid ${colors.brand.neutral7};
-      border-radius: ${misc.borderRadius};
-      max-height: 400px;
-      overflow-y: scroll;
-      scroll-behavior: smooth;
-      padding: ${spacing.small};
-    `}
-  transition: ${misc.transition.default};
-  &:focus-within {
-    border-color: ${colors.brand.primary};
-  }
-`;
-
-export default TreeStructureWrapper;