@ndla/ui 22.0.2 → 22.2.0

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

@@ -29,6 +29,8 @@ declare const messages: {
             collectedInfo: string;
             general: string;
             topic: string;
+            isAuth: string;
+            isNotAuth: string;
         };
         resource: {
             accessDenied: string;
@@ -311,6 +313,7 @@ declare const messages: {
         contextModal: {
             button: string;
             heading: string;
+            ariaLabel: string;
         };
     };
     subjectPage: {
@@ -356,6 +359,7 @@ declare const messages: {
         articleErrorDescription: string;
         topic: string;
         topics: string;
+        imageModal: string;
     };
     welcomePage: {
         search: string;
@@ -413,6 +417,7 @@ declare const messages: {
             toFrontpage: string;
             subjectOverview: string;
             title: string;
+            modalLabel: string;
             subjectPage: string;
             backToSubjectFrontpage: string;
             openFilter: string;
@@ -523,6 +528,7 @@ declare const messages: {
     competenceGoals: {
         competenceGoal: string;
         title: string;
+        modalText: string;
         closeCompetenceGoals: string;
         showCompetenceGoals: string;
         openCompentenceGoalsFilter: string;
@@ -546,6 +552,8 @@ declare const messages: {
         competenceGoalItem: {
             title: string;
         };
+        licenseData: string;
+        licenseFrom: string;
     };
     subject: {
         associatedTopics: string;

package/lib/locale/messages-sma.js

@@ -172,7 +172,8 @@ var messages = _objectSpread(_objectSpread({
     },
     contextModal: {
       button: '+ {{count}} flere steder',
-      heading: 'Ressursen er brukt flere steder'
+      heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster'
     }
   },
   subjectPage: {
@@ -217,7 +218,8 @@ var messages = _objectSpread(_objectSpread({
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
-    topics: 'Emner'
+    topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse'
   },
   welcomePage: {
     search: 'Søk',
@@ -275,6 +277,7 @@ var messages = _objectSpread(_objectSpread({
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -361,6 +364,7 @@ var messages = _objectSpread(_objectSpread({
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -383,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'
@@ -923,7 +929,9 @@ var messages = _objectSpread(_objectSpread({
     modal: {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
-      topic: 'Logg inn med Feide for å få tilgang til dette emnet.'
+      topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide'
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'

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.2",
+  "version": "22.2.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,16 +31,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.2.1",
+    "@ndla/button": "^3.3.0",
     "@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.16",
-    "@ndla/notion": "^3.1.27",
-    "@ndla/safelink": "^2.2.5",
+    "@ndla/modal": "^1.2.17",
+    "@ndla/notion": "^3.1.29",
+    "@ndla/safelink": "^2.2.6",
     "@ndla/switch": "^0.1.10",
     "@ndla/tabs": "^1.1.14",
     "@ndla/tooltip": "^2.1.5",
@@ -68,7 +68,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 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d26b1f085bcef66dcc1d8ed829072ab1223d28eb"
+  "gitHead": "12ed2984919fd75fbb7f1b1e55c1d5903fd51d51"
 }

package/src/Article/ArticleByline.tsx

@@ -102,6 +102,8 @@ const ArticleByline = ({
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
+  const buttonId = 'popupUseContent';
+
   return (
     <Wrapper>
       <div>
@@ -124,8 +126,9 @@ const ArticleByline = ({
       <ButtonWrapper>
         {licenseBox && (
           <Modal
+            labelledBy={buttonId}
             activateButton={
-              <Button size="small" borderShape="rounded" outline>
+              <Button id={buttonId} size="small" borderShape="rounded" outline>
                 {t('article.useContent')}
               </Button>
             }

package/src/Article/ArticleNotions.tsx

@@ -165,14 +165,17 @@ type ArticleNotionsProps = {
 export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
+  const headingId = 'popupNotionHeading';
+
   return (
     <ArticleNotionsContainer>
       <Modal
+        labelledBy={headingId}
         activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
-            <span>{t('article.notionsPrompt')}</span>
+            <span id={headingId}>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
         }
         size="large"

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/CompetenceGoals/CompetenceGoalsDialog.jsx

@@ -33,8 +33,11 @@ const HeadingWrapper = styled.h2`
 
 export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }) => {
   const { t } = useTranslation();
+  const iconId = 'popupCompetenceGoals';
+
   return (
     <Modal
+      labelledBy={iconId}
       {...modalProps}
       controllable
       isOpen={isOpen}
@@ -48,8 +51,8 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
           <ModalHeader modifier="menu">
             <HeaderWrapper>
               <HeadingWrapper>
-                <FooterHeaderIcon size="24px" style={{ marginRight: '20px' }} />
-                {'Utforsk læreplankoblinger'} {subjectName && ` \u2022 ${subjectName}`}
+                <FooterHeaderIcon id={iconId} size="24px" style={{ marginRight: '20px' }} />
+                {t('competenceGoals.modalText')} {subjectName && ` \u2022 ${subjectName}`}
               </HeadingWrapper>
               <ModalCloseButton onClick={close} title={t('competenceGoals.competenceGoalClose')} />
             </HeaderWrapper>

package/src/Filter/FilterButtons.tsx

@@ -128,6 +128,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
+            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
             size="fullscreen"
             animation="subtle"
             backgroundColor="white"

package/src/Footer/FooterPrivacy.tsx

@@ -69,7 +69,10 @@ const StyledFooterText = styled.div`
 
 const FooterPrivacy = ({ lang, label }: FooterPrivacyProps) => (
   <StyledFooterText>
-    <Modal activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>} size="fullscreen">
+    <Modal
+      label={label}
+      activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>}
+      size="fullscreen">
       {(onClose: () => void) => (
         <OneColumn cssModifier="medium">
           <ModalHeader>

package/src/Masthead/MastheadSearchModal.tsx

@@ -117,6 +117,7 @@ const MastheadSearchModal = ({
   t,
 }: Props & WithTranslation) => (
   <Modal
+    label={t('searchPage.searchFieldPlaceholder')}
     backgroundColor="grey"
     animation="slide-down"
     animationDuration={200}

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/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -66,6 +66,9 @@ const ResourcesTopicTitle = ({
   } else {
     heading = <h1 {...classes('topic-title', 'single')}>{messages.label}</h1>;
   }
+
+  const tooltipId = 'popupDialogTooltip';
+
   return (
     <header {...classes('topic-title-wrapper', { invertedStyle })}>
       <div>
@@ -82,6 +85,7 @@ const ResourcesTopicTitle = ({
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
           <Modal
+            labelledBy={tooltipId}
             narrow
             wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
@@ -89,7 +93,7 @@ const ResourcesTopicTitle = ({
               </TooltipWrapper>
             )}
             activateButton={
-              <TooltipButton aria-label={t('resource.dialogTooltip')}>
+              <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }>

package/src/SearchTypeResult/PopupFilter.tsx

@@ -92,9 +92,11 @@ const PopupFilter = ({
 }: PopupFilterProps) => {
   const { t } = useTranslation();
   const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
+  const headingId = 'popupFilterHeading';
 
   return (
     <Modal
+      labelledBy={headingId}
       controllable
       backgroundColor="white"
       animation="subtle"
@@ -107,7 +109,7 @@ const PopupFilter = ({
           <ModalWrapper>
             <ModalContent>
               <ModalHeaderWrapper>
-                <ModalHeading>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
+                <ModalHeading id={headingId}>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
                 <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
               </ModalHeaderWrapper>
               {subjectCategories && programmes && (

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -98,6 +98,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
        
       {contexts.length > 1 && (
         <Modal
+          label={t('searchPage.contextModal.ariaLabel')}
           activateButton={
             <ModalButton link>
               {t('searchPage.contextModal.button', {

package/src/Topic/Topic.tsx

@@ -268,6 +268,7 @@ const Topic = ({
                   {topic.visualElement ? (
                     <>
                       <Modal
+                        label={t('topicPage.imageModal')}
                         activateButton={
                           <VisualElementButton
                             stripped

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};