@ndla/ui 20.0.3 → 21.0.0

package/lib/TreeStructure/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { MouseEvent, ReactNode } from 'react';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { MenuItemProps } from '@ndla/button/src';
+export interface FolderType extends IFolder {
+    icon?: ReactNode;
+}
+export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
+    onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
+}
+export interface CommonTreeStructureProps {
+    loading?: boolean;
+    onSelectFolder?: (id: string) => void;
+    openOnFolderClick?: boolean;
+    menuItems?: TreeStructureMenuProps[];
+}
+export interface CommonFolderItemsProps extends CommonTreeStructureProps {
+    focusedFolderId?: string;
+    level: number;
+    selectedFolder?: FolderType;
+    onCloseFolder: (id: string) => void;
+    onOpenFolder: (id: string) => void;
+    setFocusedId: (id: string) => void;
+    setSelectedFolder: (id: FolderType) => void;
+    visibleFolders: string[];
+}

package/lib/index.d.ts

@@ -88,4 +88,4 @@ export type { SnackBarItem } from './SnackBar';
 export { SnackBar } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
-export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';
+export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "20.0.3",
+  "version": "21.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -44,6 +44,7 @@
     "@ndla/switch": "^0.1.9",
     "@ndla/tabs": "^1.1.13",
     "@ndla/tooltip": "^2.1.4",
+    "@ndla/types-learningpath-api": "^0.0.12",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -82,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fd7915eee936f4d2450c1263e4830a7bda29d49a"
+  "gitHead": "57a015c6fe4a2106bb88d0f2ebea44592aa4d29e"
 }

package/src/LearningPaths/LearningPathInformation.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
+import { fonts, spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;
@@ -50,6 +51,17 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   }
 `;
 
+const LicenseWrapper = styled.div`
+  ul {
+    margin-left: 0;
+    margin-bottom: ${spacing.small};
+  }
+`;
+
+const StyledHeader = styled.h1`
+  margin-bottom: ${spacing.small};
+`;
+
 interface Props {
   description?: string;
   title: string;
@@ -59,14 +71,17 @@ interface Props {
   };
 }
 
-export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => (
-  <section className="o-wrapper">
-    <StyledWrapper invertedStyle={invertedStyle} className="c-article">
-      <div>
-        <h1>{title}</h1>
-        {license && license.license}
-      </div>
-      {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
-    </StyledWrapper>
-  </section>
-);
+export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => {
+  const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
+  return (
+    <section className="o-wrapper">
+      <StyledWrapper invertedStyle={invertedStyle} className="c-article">
+        <LicenseWrapper>
+          <StyledHeader>{title}</StyledHeader>
+          <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+        </LicenseWrapper>
+        {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
+      </StyledWrapper>
+    </section>
+  );
+};

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -9,22 +9,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
-import { spacing, fonts } from '@ndla/core';
+import { spacing, fonts, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 const StyledLearningPathDetails = styled.div`
   ${fonts.sizes(14, 1.1)};
   font-weight: ${fonts.weight.normal};
-  margin: 0;
+`;
+
+const UserLine = styled.div`
   display: flex;
-  align-items: flex-start;
-  justify-items: flex-start;
   margin-bottom: ${spacing.xsmall};
-  p {
-    margin: 0;
-    padding-left: ${spacing.xsmall};
-  }
+
   span {
-    display: block;
+    margin-left: ${spacing.xsmall};
   }
 `;
 
@@ -40,16 +38,20 @@ type Props = {
   };
 };
 
-const LearningPathMenuAsideCopyright = ({ copyright }: Props) => (
-  <StyledLearningPathDetails>
-    <User />
-    <p>
-      {copyright.contributors.map((contributor) => (
-        <span key={contributor.name}>{contributor.name}</span>
-      ))}
-      <span>{copyright.license.license}</span>
-    </p>
-  </StyledLearningPathDetails>
-);
+const LearningPathMenuAsideCopyright = ({ copyright }: Props) => {
+  const { rights } = getLicenseByAbbreviation(copyright.license.license || '', 'nb');
+  return (
+    <StyledLearningPathDetails>
+      <UserLine>
+        <User />
+        {copyright.contributors.map((contributor) => (
+          <span key={contributor.name}>{contributor.name}</span>
+        ))}
+      </UserLine>
+
+      <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+    </StyledLearningPathDetails>
+  );
+};
 
 export default LearningPathMenuAsideCopyright;

package/src/TreeStructure/FolderItem.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, MouseEvent, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
+import { MenuButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
@@ -39,10 +40,10 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
-const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+const WrapperForFolderChild = styled.div<{ selected?: boolean }>`
   position: absolute;
   right: ${spacing.xsmall};
-  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  opacity: ${({ selected }) => (selected ? 1 : 0.25)};
   &:hover,
   &:focus,
   &:focus-within {
@@ -50,16 +51,20 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
-  marked: boolean;
+const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
+
+interface FolderNameProps {
+  selected?: boolean;
   noArrow?: boolean;
-}>`
+}
+
+const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
   line-height: 1;
-  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+  background: ${({ selected }) => (selected ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
   &:hover,
   &:focus {
-    background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
+    background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
     + ${WrapperForFolderChild} {
       opacity: 1;
@@ -82,52 +87,40 @@ const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', '
 
 const FolderNameLink = FolderName.withComponent(SafeLink);
 
-interface Props {
-  name: string;
-  id: string;
-  level: number;
-  onCloseFolder: (id: string) => void;
-  onOpenFolder: (id: string) => void;
-  onMarkFolder: (id: string) => void;
-  onSelectFolder?: (id: string) => void;
-  isOpen: boolean;
-  markedFolderId?: string;
-  focusedFolderId?: string;
-  visibleFolders: string[];
-  loading?: boolean;
-  openOnFolderClick?: boolean;
+interface Props extends CommonFolderItemsProps {
   hideArrow?: boolean;
-  setFocusedFolderId: SetFocusedFolderId;
-  icon?: React.ReactNode;
+  isOpen: boolean;
+  folder: FolderType;
   noPaddingWhenArrowIsHidden?: boolean;
-  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
+  focusedFolderId,
+  menuItems,
   hideArrow,
-  loading,
+  folder,
+  isOpen,
   level,
-  name,
-  id,
-  visibleFolders,
+  loading,
+  selectedFolder,
+  noPaddingWhenArrowIsHidden,
   onCloseFolder,
   onOpenFolder,
-  onMarkFolder,
   onSelectFolder,
-  isOpen,
-  markedFolderId,
-  focusedFolderId,
   openOnFolderClick,
-  setFocusedFolderId,
-  icon,
-  noPaddingWhenArrowIsHidden,
-  folderChild,
+  setFocusedId,
+  setSelectedFolder,
+  visibleFolders,
 }: Props) => {
+  const { id, icon, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const marked = markedFolderId === id;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const focused = focusedFolderId === id;
 
-  const handleMarkFolder = () => {
-    onMarkFolder(id);
+  const handleClickFolder = () => {
+    setSelectedFolder(folder);
+    setFocusedId(id);
+    onSelectFolder?.(id);
     if (openOnFolderClick) {
       if (isOpen) {
         onCloseFolder(id);
@@ -139,12 +132,20 @@ const FolderItem = ({
 
   useEffect(() => {
     if (focusedFolderId === id) {
-      if (ref.current) {
-        ref.current.focus();
-      }
+      ref.current?.focus();
     }
   }, [focusedFolderId, ref, id]);
 
+  const actions = menuItems?.map((item) => {
+    const { onClick } = item;
+    return {
+      ...item,
+      onClick: (e?: MouseEvent<HTMLDivElement>) => onClick(e, folder),
+    };
+  });
+
+  const linkPath = `/minndla${level > 1 ? '/folders' : ''}/${id}`;
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
@@ -160,24 +161,19 @@ const FolderItem = ({
         <>
           <FolderName
             ref={ref}
-            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-            tabIndex={marked ? 0 : -1}
-            marked={marked}
+            tabIndex={selected || focused ? 0 : -1}
+            selected={selected}
             disabled={loading}
-            onFocus={() => {
-              setFocusedFolderId(id);
-            }}
-            onClick={() => {
-              handleMarkFolder();
-              onSelectFolder(id);
-            }}>
+            onFocus={() => setFocusedId(id)}
+            onClick={handleClickFolder}>
             {icon || <FolderOutlined />}
             {name}
           </FolderName>
-          {folderChild && (
-            <WrapperForFolderChild marked={marked}>
-              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+          {actions && (
+            <WrapperForFolderChild selected={selected}>
+              <MenuButton size="xsmall" menuItems={actions} tabIndex={selected || id === focusedFolderId ? 0 : -1} />
             </WrapperForFolderChild>
           )}
         </>
@@ -185,18 +181,14 @@ const FolderItem = ({
         <FolderNameLink
           ref={ref}
           onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+            arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
           }
           noArrow={hideArrow}
-          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
-          tabIndex={marked || level === 1 ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            handleMarkFolder();
-          }}>
+          to={loading ? '' : linkPath}
+          tabIndex={selected || focused || level === 1 ? 0 : -1}
+          selected={selected}
+          onFocus={() => setFocusedId(id)}
+          onClick={handleClickFolder}>
           {icon || <FolderOutlined />}
           {name}
         </FolderNameLink>

package/src/TreeStructure/FolderItems.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { animations, spacing } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
-import { FolderItemsProps } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 
 const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   ${animations.fadeInLeft(animations.durations.fast)};
@@ -30,85 +30,65 @@ const StyledLI = styled.li`
   padding: 0;
 `;
 
+export interface FolderItemsProps extends CommonFolderItemsProps {
+  folders: FolderType[];
+  editable?: boolean;
+  maximumLevelsOfFoldersAllowed: number;
+  newFolderParentId: string | undefined;
+  onCancelNewFolder: () => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  openFolders: string[];
+}
+
 const FolderItems = ({
-  loading,
+  editable,
   folders,
   level,
-  editable,
-  onSelectFolder,
-  onCloseFolder,
-  onOpenFolder,
-  onCreateNewFolder,
+  loading,
+  maximumLevelsOfFoldersAllowed,
+  newFolderParentId,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolderParentId,
-  visibleFolders,
   openFolders,
-  markedFolderId,
-  onMarkFolder,
-  openOnFolderClick,
-  focusedFolderId,
-  setFocusedFolderId,
-  folderChild,
-  maximumLevelsOfFoldersAllowed,
+  ...rest
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={level === 1}>
-    {folders.map(({ name, subfolders, id, icon }, _index) => {
+    {folders.map((folder) => {
+      const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
             <FolderItem
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              folder={folder}
+              isOpen={isOpen}
               level={level}
-              icon={icon}
-              onSelectFolder={onSelectFolder}
-              openOnFolderClick={openOnFolderClick}
               loading={loading}
-              isOpen={isOpen}
-              id={id}
-              visibleFolders={visibleFolders}
-              name={name}
-              markedFolderId={markedFolderId}
-              focusedFolderId={focusedFolderId}
-              onMarkFolder={onMarkFolder}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
               noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              {...rest}
             />
           </div>
           {newFolderParentId === id && (
             <FolderNameInput
-              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
+              parentId={newFolderParentId}
             />
           )}
           {subfolders && isOpen && (
             <FolderItems
-              onSelectFolder={onSelectFolder}
-              loading={loading}
-              newFolderParentId={newFolderParentId}
-              visibleFolders={visibleFolders}
-              openFolders={openFolders}
-              level={level + 1}
               editable={editable}
               folders={subfolders}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              onCreateNewFolder={onCreateNewFolder}
-              onSaveNewFolder={onSaveNewFolder}
-              onCancelNewFolder={onCancelNewFolder}
-              markedFolderId={markedFolderId}
-              onMarkFolder={onMarkFolder}
-              openOnFolderClick={openOnFolderClick}
-              focusedFolderId={focusedFolderId}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              level={level + 1}
+              loading={loading}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              openFolders={openFolders}
+              {...rest}
             />
           )}
         </StyledLI>

package/src/TreeStructure/FolderNameInput.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
 import styled from '@emotion/styled';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
@@ -65,11 +65,9 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.select();
-      if (isMobile) {
-        inputRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
+    inputRef.current?.select();
+    if (isMobile) {
+      inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, []);
 
@@ -85,7 +83,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
           disabled={loading}
           value={name}
           onBlur={() => onCancelNewFolder()}
-          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
@@ -93,10 +91,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
               onSaveNewFolder(name, parentId);
             }
           }}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target;
-            setName(target.value);
-          }}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
         />
         {loading && <Spinner size="small" />}
       </InputWrapper>