@ndla/ui 27.1.0 → 27.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "27.1.0",
+  "version": "27.1.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.5.2",
+    "@ndla/button": "^3.5.3",
     "@ndla/carousel": "^1.2.23",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.2",
+    "@ndla/forms": "^3.3.3",
     "@ndla/hooks": "^1.1.6",
     "@ndla/icons": "^1.13.0",
     "@ndla/licenses": "^5.0.17",
     "@ndla/modal": "^1.4.0",
-    "@ndla/notion": "^3.1.43",
-    "@ndla/safelink": "^2.2.16",
+    "@ndla/notion": "^3.1.44",
+    "@ndla/safelink": "^2.2.17",
     "@ndla/switch": "^0.1.13",
     "@ndla/tabs": "^1.1.22",
     "@ndla/tooltip": "^2.2.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "836b1704ea5987fe73d02ceae2cc014947deb893"
+  "gitHead": "bba524f1971adfe12c6b5e6ac8d2a532f828f790"
 }

package/src/MyNdla/Resource/FolderInput.tsx

@@ -7,110 +7,106 @@
  */
 
 import styled from '@emotion/styled';
-import { IconButton } from '@ndla/button';
-import { FolderOutlined } from '@ndla/icons/contentType';
+import { IconButton, IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
-import React, { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
+import React, { ComponentProps, forwardRef, useEffect } from 'react';
+import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
-import { Input } from '@ndla/forms';
-import { css } from '@emotion/core';
+import { InputV2 } from '@ndla/forms';
 import { Done } from '@ndla/icons/editor';
+import { Spinner } from '@ndla/icons';
+import { useForwardedRef } from '@ndla/util';
+
+interface Props extends ComponentProps<typeof InputV2> {
+  loading?: boolean;
+  onClose?: () => void;
+  onSave: () => void;
+}
 
 // Source: https://kovart.github.io/dashed-border-generator/
-const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
-  colors.brand.tertiary,
-)}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
+const borderStyle = (error?: boolean) =>
+  `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
+    error ? colors.support.red : colors.brand.tertiary,
+  )}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
 
-const StyledFolderIcon = styled.span`
-  display: flex;
-  padding: ${spacing.small};
-  svg {
-    color: ${colors.brand.primary};
-    height: 20px;
-    width: 20px;
-  }
-`;
+interface StyledInputProps {
+  error?: string;
+}
 
-const inputWrapperStyle = css`
-  padding: ${spacing.small};
-  background: none;
-  background-image: ${borderStyle};
+const StyledInput = styled(InputV2)<StyledInputProps>`
+  background-color: white;
+  background-image: ${({ error }) => borderStyle(!!error)};
   border: none;
-`;
-
-const StyledInput = styled(Input)`
-  && {
-    flex-grow: 1;
-    flex-basis: 0;
-    min-width: 0;
+  border-radius: 0;
+  flex-wrap: nowrap;
+  input {
     line-height: 1.75em;
     color: ${colors.brand.primary};
+    caret-color: ${colors.brand.tertiary};
     ::selection {
       background: ${colors.brand.lighter};
     }
+    ::placeholder {
+      color: ${colors.brand.tertiary};
+    }
   }
 `;
 
 const Row = styled.div`
   display: flex;
-  gap: ${spacing.xsmall};
-  padding-right: ${spacing.small};
+  align-items: center;
+  gap: ${spacing.xxsmall};
+  padding-right: ${spacing.xsmall};
 `;
 
-interface Props {
-  onAddFolder: (name: string) => void;
-  onClose: () => void;
-  autoSelect?: boolean;
-}
-
-const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
+const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClose, onSave, ...rest }, ref) => {
   const { t } = useTranslation();
-  const newFolderText = t('treeStructure.newFolder.defaultName');
-  const [input, setInput] = useState<string>(newFolderText);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setInput(e.target.value);
-  };
+  const inputRef = useForwardedRef(ref);
 
-  const onKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input.trim()) {
-      e.preventDefault();
-      onAddFolder(input);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      onClose();
+  useEffect(() => {
+    if (isMobile) {
+      inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <StyledInput
-      autoSelect={autoSelect}
-      customCss={inputWrapperStyle}
-      warningText={!input.trim() ? t('myNdla.folder.missingName') : undefined}
-      ref={inputRef}
-      value={input}
-      onChange={handleInputChange}
-      onKeyDown={onKeydown}
-      aria-label={newFolderText}
-      iconLeft={
-        <StyledFolderIcon>
-          <FolderOutlined />
-        </StyledFolderIcon>
-      }
-      iconRight={
+      white
+      error={error}
+      aria-disabled={loading ? true : undefined}
+      aria-describedby={'folder-input-spinner'}
+      ref={ref}
+      after={
         <Row>
-          <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-            <Cross />
-          </IconButton>
-          <IconButton aria-label={t('save')} size="small" ghostPill onClick={() => onAddFolder(input)}>
-            <Done />
-          </IconButton>
+          {!loading && (
+            <>
+              {!error && (
+                <IconButtonV2
+                  variant={'ghost'}
+                  colorTheme="light"
+                  tabIndex={0}
+                  aria-label={t('save')}
+                  title={t('save')}
+                  size="small"
+                  onClick={onSave}>
+                  <Done />
+                </IconButtonV2>
+              )}
+              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onClose}>
+                <Cross />
+              </IconButton>
+            </>
+          )}
+          <div aria-live="assertive">
+            {loading && <Spinner size="normal" margin={spacing.small} id="folder-spinner" aria-label={t('loading')} />}
+          </div>
         </Row>
       }
+      {...rest}
     />
   );
-};
+});
 
 export default FolderInput;

package/src/Resource/resourceComponents.tsx

@@ -185,12 +185,10 @@ export const TopicList = ({ topics }: TopicListProps) => {
   return (
     <StyledTopicList aria-label={t('navigation.topics')}>
       {topics.map((topic, i) => (
-        <>
-          <StyledTopicListElement key={topic}>
-            {topic}
-            {i !== topics.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
-          </StyledTopicListElement>
-        </>
+        <StyledTopicListElement key={topic}>
+          {topic}
+          {i !== topics.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
+        </StyledTopicListElement>
       ))}
     </StyledTopicList>
   );

package/src/TreeStructure/AddFolderButton.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@ndla/tooltip';
+import styled from '@emotion/styled';
+import { ButtonV2 as Button } from '@ndla/button';
+import { Plus } from '@ndla/icons/action';
+import { FolderType } from './types';
+
+interface AddFolderButtonProps {
+  canAddFolder: boolean;
+  focusedFolder?: FolderType;
+  setNewFolderParentId: (id?: string) => void;
+}
+
+const StyledAddFolderButton = styled(Button)`
+  &,
+  &:disabled {
+    border-color: transparent;
+  }
+`;
+
+const StyledPlus = styled(Plus)`
+  height: 24px;
+  width: 24px;
+`;
+
+const AddFolderButton = ({ canAddFolder, setNewFolderParentId, focusedFolder }: AddFolderButtonProps) => {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <Tooltip
+      tooltip={
+        canAddFolder
+          ? t('myNdla.newFolderUnder', {
+              folderName: focusedFolder?.name,
+            })
+          : t('treeStructure.maxFoldersAlreadyAdded')
+      }>
+      <StyledAddFolderButton
+        ref={ref}
+        variant="outline"
+        shape="pill"
+        disabled={!canAddFolder}
+        aria-label={
+          canAddFolder
+            ? t('myNdla.newFolderUnder', {
+                folderName: focusedFolder?.name,
+              })
+            : t('treeStructure.maxFoldersAlreadyAdded')
+        }
+        onMouseDown={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          ref.current?.focus();
+        }}
+        onMouseUp={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          ref.current?.focus();
+        }}
+        onClick={(e) => {
+          e.currentTarget.focus();
+          setNewFolderParentId(focusedFolder?.id);
+        }}>
+        <StyledPlus /> {t('myNdla.newFolder')}
+      </StyledAddFolderButton>
+    </Tooltip>
+  );
+};
+
+export default AddFolderButton;

package/src/TreeStructure/ComboboxButton.tsx

@@ -7,13 +7,9 @@
  */
 
 import React, { KeyboardEvent } from 'react';
-import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
-import Tooltip from '@ndla/tooltip';
-import { colors, spacing } from '@ndla/core';
-import { IFolder } from '@ndla/types-learningpath-api';
-import { Plus } from '@ndla/icons/action';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
 import { forwardRef } from 'react';
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
@@ -27,8 +23,8 @@ interface StyledRowProps {
 
 const StyledRow = styled.div<StyledRowProps>`
   display: flex;
-  justify-content: space-between;
   padding: ${spacing.xxsmall};
+  align-items: center;
   border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
 `;
 const StyledSelectedFolder = styled(Button)`
@@ -44,20 +40,13 @@ const StyledSelectedFolder = styled(Button)`
   :focus-visible {
     outline: none;
   }
-`;
-
-const StyledAddFolderButton = styled(Button)`
-  &,
-  &:disabled {
-    border-color: transparent;
+  ${mq.range({ until: breakpoints.tablet })} {
+    min-height: 4rem;
+    max-height: 4rem;
+    text-align: start;
   }
 `;
 
-const StyledPlus = styled(Plus)`
-  height: 24px;
-  width: 24px;
-`;
-
 interface Props {
   showTree: boolean;
   type: TreeStructureType;
@@ -70,9 +59,6 @@ interface Props {
   onOpenFolder: (id: string) => void;
   onCloseFolder: (id: string) => void;
   setFocusedFolder: (folder?: FolderType) => void;
-  onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
-  maxLevel: number;
-  setNewFolderParentId: (id?: string) => void;
 }
 
 const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
@@ -89,13 +75,9 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       setFocusedFolder,
       onOpenFolder,
       onCloseFolder,
-      onNewFolder,
-      maxLevel,
-      setNewFolderParentId,
     },
     ref,
   ) => {
-    const { t } = useTranslation();
     const innerRef = useForwardedRef(ref);
 
     const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
@@ -118,7 +100,6 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       }
     };
 
-    const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maxLevel || 1);
     return (
       <StyledRow isOpen={showTree}>
         <StyledSelectedFolder
@@ -137,35 +118,11 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           shape="sharp"
           onKeyDown={onKeyDown}
           onClick={() => {
+            innerRef.current?.focus();
             onToggleTree(!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(focusedFolder?.id)}>
-              <StyledPlus /> {t('myNdla.newFolder')}
-            </StyledAddFolderButton>
-          </Tooltip>
-        )}
         <IconButton
           aria-hidden
           aria-label=""
@@ -174,9 +131,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           colorTheme="greyLighter"
           size="small"
           onClick={() => {
-            if (!showTree) {
-              innerRef.current?.focus();
-            }
+            innerRef.current?.focus();
             onToggleTree(!showTree);
           }}>
           {showTree ? <ChevronUp /> : <ChevronDown />}

package/src/TreeStructure/FolderItem.tsx

@@ -37,6 +37,9 @@ const OpenButton = styled.span<{ isOpen: boolean }>`
 `;
 
 const StyledName = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   grid-column-start: 2;
   text-align: left;
 `;
@@ -63,7 +66,6 @@ const FolderName = styled(Button, { shouldForwardProp })<FolderNameProps>`
   color: ${({ isCreatingFolder, focused }) =>
     isCreatingFolder && focused ? colors.brand.primary : colors.text.primary};
   transition: ${animations.durations.superFast};
-  line-height: 1;
   word-break: break-word;
 
   &:hover {
@@ -93,7 +95,6 @@ const FolderNameLink = styled(SafeLink, { shouldForwardProp })<FolderNameProps>`
   font-weight: ${({ selected }) => selected && fonts.weight.semibold};
   font-size: ${fonts.sizes('16px')};
   transition: ${animations.durations.superFast};
-  line-height: 1;
   word-break: break-word;
   &:hover,
   &:focus {
@@ -230,7 +231,7 @@ const FolderItem = ({
       selected={selected}
       disabled={loading}
       onFocus={(e) => {
-        setFocusedFolder(focusedFolder || folder, true);
+        setFocusedFolder(focusedFolder || folder);
       }}
       onClick={handleClickFolder}
       isCreatingFolder={isCreatingFolder}>
@@ -241,7 +242,7 @@ const FolderItem = ({
           isOpen={isOpen}
           onClick={(e) => {
             e.stopPropagation();
-            setFocusedFolder(folder, true);
+            setFocusedFolder(folder);
             if (isOpen) {
               onCloseFolder(id);
             } else {

package/src/TreeStructure/FolderItems.tsx

@@ -10,8 +10,7 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
 import FolderItem from './FolderItem';
-import FolderNameInput from './FolderNameInput';
-import { CommonFolderItemsProps, FolderType, TreeStructureType } from './types';
+import { CommonFolderItemsProps, FolderType, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
 import NavigationLink from './NavigationLink';
 import { treestructureId } from './helperFunctions';
 
@@ -42,10 +41,11 @@ export interface FolderItemsProps extends CommonFolderItemsProps {
   folders: FolderType[];
   newFolderParentId: string | undefined;
   onCancelNewFolder: () => void;
-  onSaveNewFolder: (name: string, parentId: string) => void;
   openFolders: string[];
   parentFolder?: FolderType;
   children?: ReactNode;
+  onCreate: OnCreatedFunc;
+  newFolderInput?: NewFolderInputFunc;
 }
 
 const FolderItems = ({
@@ -54,11 +54,12 @@ const FolderItems = ({
   loading,
   newFolderParentId,
   onCancelNewFolder,
-  onSaveNewFolder,
   openFolders,
   type,
   parentFolder,
   children,
+  onCreate,
+  newFolderInput,
   ...rest
 }: FolderItemsProps) => (
   <StyledUL
@@ -101,20 +102,12 @@ const FolderItems = ({
                   type={type}
                   newFolderParentId={newFolderParentId}
                   onCancelNewFolder={onCancelNewFolder}
-                  onSaveNewFolder={onSaveNewFolder}
                   openFolders={openFolders}
+                  newFolderInput={newFolderInput}
+                  onCreate={onCreate}
                   {...rest}>
                   {newFolderParentId === id && (
-                    <li role="none">
-                      <FolderNameInput
-                        loading={loading}
-                        level={level}
-                        onCancelNewFolder={onCancelNewFolder}
-                        onSaveNewFolder={onSaveNewFolder}
-                        parentId={newFolderParentId}
-                        type={type}
-                      />
-                    </li>
+                    <li role="none">{newFolderInput?.({ parentId: id, onClose: onCancelNewFolder, onCreate })}</li>
                   )}
                 </FolderItems>
               )}