@ndla/ui 16.1.0 → 17.0.0

package/src/TreeStructure/FolderItem.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
-import { SetFocusedFolderId } from './TreeStructure.types';
+import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -37,6 +37,16 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
+const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+  position: absolute;
+  right: ${spacing.xsmall};
+  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+`;
+
 const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
@@ -45,6 +55,9 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   &:focus {
     background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
+    + ${WrapperForFolderChild} {
+      opacity: 1;
+    }
   }
   transition: ${animations.durations.superFast};
   border: 0;
@@ -58,6 +71,7 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
   flex-grow: 1;
   box-shadow: none;
+  text-align: left;
 `;
 
 const FolderNameLink = FolderName.withComponent('a');
@@ -77,6 +91,7 @@ interface Props {
   url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
+  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
@@ -94,6 +109,7 @@ const FolderItem = ({
   icon,
   url,
   noPaddingWhenArrowIsHidden,
+  folderChild,
 }: Props) => {
   const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
   const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -134,24 +150,29 @@ const FolderItem = ({
           {name}
         </FolderNameLink>
       ) : (
-        <FolderName
-          ref={folderNameButtonRef}
-          noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-          tabIndex={marked ? 0 : -1}
-          marked={marked}
-          disabled={loading}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            onMarkFolder(id);
-            if (openOnFolderClick) {
-              onToggleOpen(id);
-            }
-          }}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderName>
+        <>
+          <FolderName
+            ref={folderNameButtonRef}
+            noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
+            tabIndex={marked ? 0 : -1}
+            marked={marked}
+            disabled={loading}
+            onFocus={() => {
+              setFocusedFolderId(id);
+            }}
+            onClick={() => {
+              onMarkFolder(id);
+              if (openOnFolderClick) {
+                onToggleOpen(id);
+              }
+            }}>
+            {icon || <FolderOutlined />}
+            {name}
+          </FolderName>
+          {folderChild && (
+            <WrapperForFolderChild marked={marked}>{folderChild(id, marked ? 0 : -1)}</WrapperForFolderChild>
+          )}
+        </>
       )}
     </FolderItemWrapper>
   );

package/src/TreeStructure/FolderItems.tsx

@@ -48,6 +48,7 @@ const FolderItems = ({
   focusedFolderId,
   setFocusedFolderId,
   firstLevel,
+  folderChild,
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={firstLevel}>
     {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
@@ -71,6 +72,7 @@ const FolderItems = ({
               hideArrow={dataChildren?.length === 0 || newIdPaths.length >= MAX_LEVEL_FOR_FOLDERS}
               noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
+              folderChild={folderChild}
             />
           </div>
           {newFolder?.parentId === id && (
@@ -98,6 +100,7 @@ const FolderItems = ({
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
               firstLevel={false}
+              folderChild={folderChild}
             />
           )}
         </StyledLI>

package/src/TreeStructure/TreeStructure.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { uuid } from '@ndla/util';
-import Button from '@ndla/button';
+import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
@@ -40,6 +40,7 @@ const TreeStructure = ({
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
+  folderChild,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
   const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
@@ -118,9 +119,6 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const disableAddFolderButton =
-    markedFolderId === undefined || getPathOfFolder(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
-
   return (
     <div
       ref={treestructureRef}
@@ -155,6 +153,7 @@ const TreeStructure = ({
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
           firstLevel
+          folderChild={folderChild}
         />
       </TreeStructureStyledWrapper>
       {editable && (
@@ -163,17 +162,14 @@ const TreeStructure = ({
             tooltip={t('myNdla.newFolderUnder', {
               folderName: getFolderName(data, markedFolderId),
             })}>
-            <Button
-              size="small"
-              light
-              disabled={disableAddFolderButton}
+            <AddButton
+              aria-label={t('myNdla.newFolder')}
               onClick={() => {
                 const paths = getPathOfFolder(data, markedFolderId || '');
                 const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
                 setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
-              }}>
-              {t('myNdla.newFolder')}
-            </Button>
+              }}
+            />
           </Tooltip>
         </AddFolderWrapper>
       )}

package/src/TreeStructure/TreeStructure.types.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 export interface FolderStructureProps {
   id: string;
@@ -17,7 +17,7 @@ export interface FolderStructureProps {
   status?: string;
   openAsDefault?: boolean;
   url?: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 export interface NewFolderProps {
@@ -38,6 +38,7 @@ export interface TreeStructureProps extends CommonFolderProps {
   folderIdMarkedByDefault?: string;
   onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
   defaultOpenFolders?: string[];
+  folderChild?: FolderChildFuncType;
 }
 
 export type onCreateNewFolderProp = ({
@@ -51,6 +52,8 @@ export type onCreateNewFolderProp = ({
 export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
 export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
 
+export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
+
 export interface FolderItemsProps extends CommonFolderProps {
   onToggleOpen: (id: string) => void;
   onSaveNewFolder: (value: string) => void;
@@ -65,5 +68,6 @@ export interface FolderItemsProps extends CommonFolderProps {
   setFocusedFolderId: SetFocusedFolderId;
   firstLevel: boolean;
   keyNavigationFocusIsCreateFolderButton?: boolean;
-  icon?: React.ReactElement;
+  icon?: ReactNode;
+  folderChild?: FolderChildFuncType;
 }

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -15,7 +15,7 @@ const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
   ${({ framed }) =>
     framed
       ? css`
-          border: 1px solid ${colors.brand.greyLighter};
+          border: 1px solid ${colors.brand.neutral7};
           border-radius: ${misc.borderRadius};
           max-height: 400px;
           overflow-y: scroll;

package/src/index.ts

@@ -67,7 +67,9 @@ export {
 export { default as FactBox } from './FactBox';
 
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
+export type { ImageCrop, ImageFocalPoint } from './Image';
 
+export type { HeroContentType } from './Hero';
 export {
   SubjectMaterialHero,
   TasksAndActivitiesHero,
@@ -81,7 +83,15 @@ export {
 
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
 
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
+export {
+  Figure,
+  FigureCaption,
+  FigureLicenseDialog,
+  FigureExpandButton,
+  FigureOpenDialogButton,
+  FigureBylineExpandButton,
+} from './Figure';
+export type { FigureType } from './Figure';
 
 export { LanguageSelector } from './LanguageSelector';
 
@@ -117,7 +127,7 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 
 export { ResourceBox } from './ResourceBox';
 
@@ -157,7 +167,7 @@ export { default as AuthorInfo } from './AuthorInfo';
 export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
-export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 
@@ -221,7 +231,10 @@ export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
+
 export { Notion, ConceptNotion } from './Notion';
+export type { NotionVisualElementType, ConceptNotionType } from './Notion';
+
 export { BannerCard } from './BannerCard';
 export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';

package/src/locale/messages-en.ts

@@ -347,7 +347,7 @@ const messages = {
     resources:
       'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
-    subjectBeta: 'This course is in beta.',
+    subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion:
       'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta:

package/src/locale/messages-nb.ts

@@ -346,7 +346,7 @@ const messages = {
     resources:
       'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion:
       'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta:

package/src/locale/messages-nn.ts

@@ -347,7 +347,7 @@ const messages = {
     resources:
       'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion:
       'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
     frontPageBeta:

package/src/locale/messages-se.ts

@@ -346,7 +346,7 @@ const messages = {
     resources:
       'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion:
       'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta:

package/src/locale/messages-sma.ts

@@ -346,7 +346,7 @@ const messages = {
     resources:
       'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion:
       'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: