@ndla/ui 22.0.3 → 22.3.0

package/lib/locale/messages-se.js

@@ -387,7 +387,9 @@ var messages = _objectSpread(_objectSpread({
     competenceTabCorelabel: 'Kjerneelement',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering'
-    }
+    },
+    licenseData: 'Inneholder data under',
+    licenseFrom: 'tilgjengeliggjort på'
   },
   subject: {
     associatedTopics: 'Tilhørende emner'
@@ -985,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;
@@ -552,6 +554,8 @@ declare const messages: {
         competenceGoalItem: {
             title: string;
         };
+        licenseData: string;
+        licenseFrom: string;
     };
     subject: {
         associatedTopics: string;

package/lib/locale/messages-sma.js

@@ -387,7 +387,9 @@ var messages = _objectSpread(_objectSpread({
     competenceTabCorelabel: 'Kjerneelement',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering'
-    }
+    },
+    licenseData: 'Inneholder data under',
+    licenseFrom: 'tilgjengeliggjort på'
   },
   subject: {
     associatedTopics: 'Tilhørende emner'
@@ -985,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/lib/types.d.ts

@@ -96,6 +96,7 @@ export declare type CompetenceGoalsItemType = {
         type: 'LK06' | 'LK20';
     }[];
     selected?: boolean;
+    isOembed?: boolean;
 };
 export declare type NotionMedia = {
     type: 'video' | 'other';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.0.3",
+  "version": "22.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.2.1",
-    "@ndla/carousel": "^1.2.15",
-    "@ndla/core": "^2.3.3",
-    "@ndla/forms": "^3.1.3",
-    "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.3",
-    "@ndla/licenses": "^5.0.6",
-    "@ndla/modal": "^1.2.17",
-    "@ndla/notion": "^3.1.28",
-    "@ndla/safelink": "^2.2.5",
-    "@ndla/switch": "^0.1.10",
-    "@ndla/tabs": "^1.1.14",
-    "@ndla/tooltip": "^2.1.5",
+    "@ndla/article-scripts": "^3.0.1",
+    "@ndla/button": "^3.3.1",
+    "@ndla/carousel": "^1.2.16",
+    "@ndla/core": "^2.3.4",
+    "@ndla/forms": "^3.1.4",
+    "@ndla/hooks": "^1.1.5",
+    "@ndla/icons": "^1.11.4",
+    "@ndla/licenses": "^5.0.7",
+    "@ndla/modal": "^1.2.18",
+    "@ndla/notion": "^3.1.30",
+    "@ndla/safelink": "^2.2.7",
+    "@ndla/switch": "^0.1.11",
+    "@ndla/tabs": "^1.1.15",
+    "@ndla/tooltip": "^2.1.6",
     "@ndla/types-learningpath-api": "^0.0.12",
-    "@ndla/util": "^3.0.0",
+    "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -68,7 +69,8 @@
     "i18next": "^20.3.1",
     "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
-    "react-i18next": "^11.11.0"
+    "react-i18next": "^11.11.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
@@ -83,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7a872c80b02640a49da4f6343a032c1c242f5aed"
+  "gitHead": "1c8439d413eefda014a9438d78a34c1639194321"
 }

package/src/Animation/DisplayOnPageYOffset.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 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/isString';
+import { isString } from 'lodash';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 

package/src/Article/ArticleByline.tsx

@@ -13,8 +13,7 @@ import Button, { CopyButton } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
 import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
-import { LicenseByline } from '@ndla/licenses';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline, getLicenseByAbbreviation } from '@ndla/licenses';
 import { TFunction } from 'i18next';
 
 const Wrapper = styled.div`

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -11,8 +11,7 @@ import { colors, fonts, spacing } from '@ndla/core';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import React from 'react';
-import { MenuButton } from '@ndla/button';
-import { MenuItemProps } from '@ndla/button';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -60,7 +60,7 @@ const GoalSearchWrapper = styled.div`
   }
 `;
 
-const CompetenceGoalItem = ({ title, goals }: CompetenceGoalsItemType) => {
+const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
   const { t } = useTranslation();
   return (
     <GoalItem>
@@ -73,7 +73,11 @@ const CompetenceGoalItem = ({ title, goals }: CompetenceGoalsItemType) => {
                 <GoalListInnerTextWrapper>{goal.text}</GoalListInnerTextWrapper>
                 {goal.url && goal.type !== 'LK06' && (
                   <GoalSearchWrapper>
-                    <SearchButton to={goal.url} text={t('competenceGoals.competenceGoalResourceSearchText')} />
+                    <SearchButton
+                      to={goal.url}
+                      text={t('competenceGoals.competenceGoalResourceSearchText')}
+                      target={isOembed ? '_blank' : '_self'}
+                    />
                   </GoalSearchWrapper>
                 )}
               </GoalListElementInnerWrapper>

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -19,6 +19,7 @@ import CompetenceItem, { ListItemProp } from './CompetenceItem';
 type CompetenceProps = {
   list: ListItemProp[];
   highlightSearchBox?: boolean;
+  isOembed?: boolean;
 };
 
 const Wrapper = styled.div`
@@ -79,7 +80,7 @@ const HighlightText = styled.span`
   font-family: 'Shadows Into Light Two', cursive;
 `;
 
-const CompetenceGoalTab = ({ list, highlightSearchBox }: CompetenceProps) => {
+const CompetenceGoalTab = ({ list, highlightSearchBox, isOembed }: CompetenceProps) => {
   const [currentTabItem, setCurrentTab] = useState(list[0]);
   const { t } = useTranslation();
 
@@ -106,15 +107,15 @@ const CompetenceGoalTab = ({ list, highlightSearchBox }: CompetenceProps) => {
           <ArrowFeatureTips />
         </HighlightWrapper>
       )}
-      <CompetenceItem item={currentTabItem} />
+      <CompetenceItem item={currentTabItem} isOembed={isOembed} />
       <LicenseByline licenseRights={[CC, BY]}>
         <LicenseIconsTextWrapper>UDIR</LicenseIconsTextWrapper>
       </LicenseByline>
-      Inneholder data under{' '}
+      {`${t('competenceGoals.licenseData')} `}
       <SafeLink to="https://data.norge.no/nlod/no" target="_blank">
         NLOD
       </SafeLink>
-      , tilgjengeliggjort på{' '}
+      {`, ${t('competenceGoals.licenseFrom')} `}
       <SafeLink to="https://data.udir.no/" target="_blank">
         data.udir.no
       </SafeLink>

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -79,9 +79,10 @@ export type ListItemProp = {
 };
 export type ListItemProps = {
   item: ListItemProp;
+  isOembed?: boolean;
 };
 
-const CompetenceItem = ({ item }: ListItemProps) => {
+const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
   const { t } = useTranslation();
   const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
   switch (type) {
@@ -105,7 +106,13 @@ const CompetenceItem = ({ item }: ListItemProps) => {
                 {group.elements.length > 0 && (
                   <Goals>
                     {group.elements.map((goal) => (
-                      <CompetenceGoalItem key={goal.id} id={goal.id} title={goal.title} goals={goal.goals} />
+                      <CompetenceGoalItem
+                        key={goal.id}
+                        id={goal.id}
+                        title={goal.title}
+                        goals={goal.goals}
+                        isOembed={isOembed}
+                      />
                     ))}
                   </Goals>
                 )}

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -37,11 +37,12 @@ const IconWrapper = styled.span`
 type Props = {
   to: string;
   text: string;
+  target?: string;
 };
 
-const SearchButton = ({ to, text }: Props) => (
+const SearchButton = ({ to, text, target = '_self' }: Props) => (
   <Wrapper>
-    <SafeLink to={to}>
+    <SafeLink to={to} target={target}>
       <IconWrapper>
         <Search style={{ width: '24px', height: '24px' }} />
       </IconWrapper>

package/src/Figure/FigureOpenDialogButton.tsx

@@ -8,8 +8,7 @@
 
 import React from 'react';
 import { Play } from '@ndla/icons/common';
-import { ExpandTwoArrows } from '@ndla/icons/action';
-import { CursorClick } from '@ndla/icons/action';
+import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 
 interface Props {
   type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';

package/src/Filter/FilterListPhone.jsx

@@ -12,7 +12,7 @@ import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { classes } from './filterClasses';
 import ToggleItem from './ToggleItem';
 import ActiveFilters from '../Search/ActiveFilters';

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
-import { fonts } from '@ndla/core';
-import { breakpoints, mq } from '@ndla/core';
+import { fonts, breakpoints, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import NavigationBox, { ItemProps } from '../Navigation/NavigationBox';
 import FrontpageAllSubjects, { subjectsProps } from './FrontpageAllSubjects';

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/core';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { makeSrcQueryString } from '../Image';

package/src/Resource/BlockResource.tsx

@@ -17,6 +17,7 @@ import ContentLoader from '../ContentLoader';
 
 interface BlockResourceProps {
   link: string;
+  tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
   topics: string[];
@@ -47,7 +48,7 @@ const BlockDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
-  ${() => BlockElementWrapper}:hover & {
+  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & {
     // Unfortunate css needed for multi-line text overflow ellipsis.
     height: 3.1em;
     -webkit-line-clamp: 2;
@@ -132,6 +133,7 @@ const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
 
 const BlockResource = ({
   link,
+  tagLinkPrefix,
   title,
   tags,
   resourceImage,
@@ -152,7 +154,7 @@ const BlockResource = ({
         <BlockTopicList topics={topics} loading={isLoading} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && <CompressedTagList tags={tags} />}
+          {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
           {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -109,6 +109,7 @@ interface StyledImageProps {
 
 export interface ListResourceProps {
   link: string;
+  tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
   topics: string[];
@@ -184,6 +185,7 @@ const ResourceDescription = ({ description, loading }: ResourceDescriptionProps)
 
 const ListResource = ({
   link,
+  tagLinkPrefix,
   title,
   tags,
   resourceImage,
@@ -205,7 +207,7 @@ const ListResource = ({
       </TopicAndTitleWrapper>
       {showDescription && <ResourceDescription description={description} loading={isLoading} />}
       <TagsandActionMenu>
-        {tags && <CompressedTagList tags={tags} />}
+        {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
         {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>

package/src/Resource/resourceComponents.tsx

@@ -6,11 +6,13 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, colors, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
+import React, { MouseEvent } from 'react';
 
 import { MenuButton } from '@ndla/button';
+import SafeLink from '@ndla/safelink';
+import { useNavigate } from 'react-router-dom';
 
 export interface ResourceImageProps {
   alt: string;
@@ -42,9 +44,13 @@ const StyledTagList = styled.ul`
 `;
 
 const StyledTagListElement = styled.li`
-  color: ${colors.brand.grey};
   margin: 0;
   ${fonts.sizes(14)};
+`;
+
+const StyledSafeLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.brand.grey};
   ::before {
     content: '#';
   }
@@ -90,14 +96,20 @@ const TagCounterWrapper = styled.p`
 
 interface TagListProps {
   tags?: string[];
+  tagLinkPrefix?: string;
 }
-
-export const TagList = ({ tags }: TagListProps) => {
+export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
   if (!tags) return null;
   return (
     <StyledTagList>
       {tags.map((tag, i) => (
-        <StyledTagListElement key={`tag-${i}`}>{tag}</StyledTagListElement>
+        <StyledTagListElement key={`tag-${i}`}>
+          <StyledSafeLink
+            onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
+            to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`}>
+            {tag}
+          </StyledSafeLink>
+        </StyledTagListElement>
       ))}
     </StyledTagList>
   );
@@ -105,20 +117,24 @@ export const TagList = ({ tags }: TagListProps) => {
 
 interface CompressedTagListProps {
   tags: string[];
+  tagLinkPrefix?: string;
 }
 
-export const CompressedTagList = ({ tags }: CompressedTagListProps) => {
+export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
+  const navigate = useNavigate();
   const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {
       text: '#' + tag,
-      onClick: () => {},
+      onClick: () => {
+        navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`);
+      },
     };
   });
 
   return (
     <>
-      <TagList tags={visibleTags} />
+      <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
         <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
           <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>

package/src/ResourceGroup/ResourceItem.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { keyframes } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';

package/src/ResourceGroup/ResourceList.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { keyframes } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';

package/src/Search/ActiveFilters.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';

package/src/Search/SearchPage.jsx

@@ -2,7 +2,7 @@ import React, { Component, Fragment, createRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import PropTypes from 'prop-types';
 import { Back } from '@ndla/icons/common';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { getCurrentBreakpoint, breakpoints } from '@ndla/util';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -9,7 +9,7 @@
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import Button from '@ndla/button';

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -7,9 +7,8 @@
  */
 import React, { FormEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
 import { Search as SearchIcon } from '@ndla/icons/common';
-import { spacing } from '@ndla/core';
+import { spacing, colors } from '@ndla/core';
 import { Cross as CrossIcon } from '@ndla/icons/action';
 
 import { useTranslation } from 'react-i18next';

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/debounce';
+import { debounce } from 'lodash';
 
 import { Home, Back, Additional, ChevronRight } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';

package/src/TreeStructure/FolderItem.tsx

@@ -49,19 +49,22 @@ const WrapperForFolderChild = styled.div`
   gap: ${spacing.xsmall};
 `;
 
-const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
+const shouldForwardProp = (name: string) => !['selected', 'noArrow', 'fullWidth'].includes(name);
 
 interface FolderNameProps {
   selected?: boolean;
   noArrow?: boolean;
+  fullWidth?: boolean;
 }
 
 const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
   cursor: pointer;
   padding: ${spacing.xsmall};
   margin: 0;
+  outline-offset: -2px;
+  outline-color: ${colors.brand.primary};
   margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
-  flex-grow: 1;
+  flex-grow: ${({ fullWidth }) => fullWidth && 1};
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -116,6 +119,7 @@ const FolderItem = ({
   setSelectedFolder,
   targetResource,
   visibleFolders,
+  framed,
 }: Props) => {
   const { t } = useTranslation();
   const { id, icon, name } = folder;
@@ -173,6 +177,7 @@ const FolderItem = ({
       {onSelectFolder ? (
         <>
           <FolderName
+            fullWidth={framed}
             ref={ref}
             onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}

package/src/TreeStructure/TreeStructure.tsx

@@ -34,7 +34,6 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
   editable?: boolean;
-  framed?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
@@ -118,6 +117,7 @@ const TreeStructure = ({
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
         setSelectedFolder(newFolder);
+        onSelectFolder?.(newFolder.id);
         setFocusedId(newFolder.id);
         setOpenFolders(uniq(openFolders.concat(parentId)));
       }
@@ -156,6 +156,7 @@ const TreeStructure = ({
           setSelectedFolder={setSelectedFolder}
           targetResource={targetResource}
           visibleFolders={visibleFolderIds}
+          framed={framed}
         />
       </TreeStructureStyledWrapper>
       {editable && (

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -13,18 +13,15 @@ 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};
-        `
-      : css`
-          margin-left: -${spacing.medium};
-        `}
+    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};

package/src/TreeStructure/types.ts

@@ -24,6 +24,7 @@ export interface CommonTreeStructureProps {
   openOnFolderClick?: boolean;
   menuItems?: TreeStructureMenuProps[];
   targetResource?: IResource;
+  framed?: boolean;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {