@ndla/ui 56.0.14-alpha.0 → 56.0.15-alpha.0

package/src/TreeStructure/AddFolderButton.tsx

@@ -1,79 +0,0 @@
-/**
- * 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 { useRef } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 as Button } from "@ndla/button";
-import { AddLine } from "@ndla/icons/action";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-
-interface AddFolderButtonProps {
-  canAddFolder: boolean;
-  focusedFolder?: IFolder;
-  setNewFolderParentId: (id?: string) => void;
-  setShowTree: (value: boolean) => void;
-  loading?: boolean;
-}
-
-const StyledAddFolderButton = styled(Button)`
-  &,
-  &:disabled {
-    border-color: transparent;
-  }
-`;
-
-const StyledPlus = styled(AddLine)`
-  height: 24px;
-  width: 24px;
-`;
-
-const AddFolderButton = ({
-  canAddFolder,
-  loading,
-  setNewFolderParentId,
-  focusedFolder,
-  setShowTree,
-}: AddFolderButtonProps) => {
-  const { t } = useTranslation();
-  const ref = useRef<HTMLButtonElement>(null);
-  const tooltip = loading
-    ? t("loading")
-    : canAddFolder
-      ? t("myNdla.newFolderUnder", { folderName: focusedFolder?.name })
-      : t("treeStructure.maxFoldersAlreadyAdded");
-  return (
-    <StyledAddFolderButton
-      ref={ref}
-      variant="outline"
-      shape="pill"
-      disabled={loading || !canAddFolder}
-      title={tooltip}
-      aria-label={tooltip}
-      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);
-        setShowTree(true);
-      }}
-    >
-      <StyledPlus /> {t("myNdla.newFolder")}
-    </StyledAddFolderButton>
-  );
-};
-
-export default AddFolderButton;

package/src/TreeStructure/ComboboxButton.tsx

@@ -1,172 +0,0 @@
-/**
- * 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 { KeyboardEvent, forwardRef } from "react";
-import styled from "@emotion/styled";
-import { ButtonV2 as Button, IconButtonV2 as IconButton } from "@ndla/button";
-import { breakpoints, colors, mq, spacing } from "@ndla/core";
-import { ArrowUpShortLine, ArrowDownShortLine } from "@ndla/icons/common";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-import { useForwardedRef } from "@ndla/util";
-import { arrowNavigation } from "./arrowNavigation";
-import { treestructureId } from "./helperFunctions";
-import { TreeStructureType } from "./types";
-import ContentLoader from "../ContentLoader";
-
-const StyledRow = styled.div`
-  display: flex;
-  padding: ${spacing.xxsmall};
-  align-items: center;
-  &[data-open="true"] {
-    border-bottom: 1px solid ${colors.brand.tertiary};
-  }
-`;
-const StyledSelectedFolder = styled(Button)`
-  flex: 1;
-  justify-content: flex-start;
-  color: ${colors.black};
-  border: none;
-  :hover,
-  :focus {
-    background: none;
-    box-shadow: none;
-    border-color: transparent;
-  }
-  :focus-visible {
-    outline: none;
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    min-height: 4rem;
-    max-height: 4rem;
-    text-align: start;
-  }
-`;
-
-interface Props {
-  showTree: boolean;
-  type: TreeStructureType;
-  label?: string;
-  focusedFolder?: IFolder;
-  selectedFolder?: IFolder;
-  setSelectedFolder: (folder: IFolder) => void;
-  loading?: boolean;
-  onToggleTree: (open: boolean) => void;
-  flattenedFolders: IFolder[];
-  onOpenFolder: (id: string) => void;
-  onCloseFolder: (id: string) => void;
-  setFocusedFolder: (folder: IFolder) => void;
-  ariaDescribedby?: string;
-}
-
-const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      showTree,
-      type,
-      label,
-      focusedFolder,
-      selectedFolder,
-      setSelectedFolder,
-      onToggleTree,
-      flattenedFolders,
-      setFocusedFolder,
-      onOpenFolder,
-      onCloseFolder,
-      loading,
-      ariaDescribedby,
-    },
-    ref,
-  ) => {
-    const innerRef = useForwardedRef(ref);
-
-    const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (e.key === "Enter") {
-        onToggleTree(!showTree);
-        if (showTree && focusedFolder) {
-          setSelectedFolder(focusedFolder);
-        }
-        return;
-      }
-      if (e.key === "Escape") {
-        onToggleTree(false);
-        e.preventDefault();
-        return;
-      }
-      if (["ArrowUp", "ArrowDown"].includes(e.key) && !showTree) {
-        onToggleTree(true);
-        return;
-      }
-      if (focusedFolder) {
-        arrowNavigation(e, focusedFolder.id, flattenedFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
-      }
-    };
-
-    return (
-      <StyledRow
-        data-open={showTree}
-        onMouseDown={(e) => {
-          if (!e.defaultPrevented) {
-            e.preventDefault();
-            e.stopPropagation();
-            onToggleTree(!showTree);
-            innerRef.current?.focus();
-          }
-        }}
-      >
-        {loading && (
-          <ContentLoader width={1000} height={40}>
-            <rect x="15" y="0" width="1000" rx="3" ry="3" r="15" height="40" />
-          </ContentLoader>
-        )}
-        {!loading && (
-          <StyledSelectedFolder
-            ref={innerRef}
-            tabIndex={0}
-            id={treestructureId(type, "combobox")}
-            role="combobox"
-            aria-controls={treestructureId(type, "popup")}
-            aria-haspopup="tree"
-            aria-expanded={showTree}
-            aria-labelledby={label ? treestructureId(type, "label") : undefined}
-            aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
-            aria-describedby={ariaDescribedby}
-            variant="ghost"
-            colorTheme="light"
-            fontWeight="normal"
-            shape="sharp"
-            onKeyDown={onKeyDown}
-            onClick={() => {
-              innerRef.current?.focus();
-              onToggleTree(showTree);
-            }}
-          >
-            {selectedFolder?.name}
-          </StyledSelectedFolder>
-        )}
-        <IconButton
-          disabled={loading}
-          aria-busy={loading}
-          aria-hidden
-          aria-label=""
-          tabIndex={-1}
-          variant="ghost"
-          colorTheme="greyLighter"
-          size="small"
-          onClick={() => {
-            innerRef.current?.focus();
-            onToggleTree(!showTree);
-          }}
-        >
-          {showTree ? <ArrowUpShortLine /> : <ArrowDownShortLine />}
-        </IconButton>
-      </StyledRow>
-    );
-  },
-);
-
-export default ComboboxButton;

package/src/TreeStructure/FolderItem.tsx

@@ -1,307 +0,0 @@
-/**
- * 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 { CSSProperties, KeyboardEvent, useEffect, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 as Button } from "@ndla/button";
-import { colors, spacing, animations, misc, fonts } from "@ndla/core";
-import { ArrowDownShortLine } from "@ndla/icons/common";
-import { FolderUserFill } from "@ndla/icons/contentType";
-import { CheckLine, FolderLine } from "@ndla/icons/editor";
-import { SafeLink } from "@ndla/safelink";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-import { arrowNavigation } from "./arrowNavigation";
-import { treestructureId } from "./helperFunctions";
-import { CommonFolderItemsProps } from "./types";
-
-const OpenButton = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  color: ${colors.brand.tertiary};
-  ${misc.transition.default};
-  cursor: pointer;
-  &:hover {
-    color: ${colors.brand.primary};
-  }
-  svg {
-    width: 24px;
-    height: 24px;
-    transform: rotate(-90deg);
-  }
-  &[data-open="true"] {
-    svg {
-      transform: rotate(0deg);
-    }
-  }
-  &[data-hide-arrow="true"] {
-    visibility: hidden;
-  }
-`;
-
-const StyledName = styled.span`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  grid-column-start: 2;
-  text-align: left;
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-`;
-
-const FolderIconWrapper = styled.div`
-  svg {
-    height: 24px;
-    width: 24px;
-  }
-`;
-
-const FolderName = styled(Button)`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  padding-left: calc(0.75 * ${spacing.normal} * var(--level));
-  gap: ${spacing.xxsmall};
-  border: none;
-  outline: none;
-  color: ${colors.text.primary};
-  transition: ${animations.durations.superFast};
-  word-break: break-word;
-
-  &:hover {
-    box-shadow: none;
-    outline: none;
-    background: ${colors.brand.lightest};
-    color: ${colors.text.primary};
-  }
-
-  &[data-focused="true"] {
-    background: ${colors.brand.lightest};
-  }
-
-  &[data-selected="true"] {
-    background: ${colors.brand.lighter};
-    &:hover {
-      background: ${colors.brand.light};
-    }
-  }
-
-  &[data-creating="true"][data-focused="true"] {
-    color: ${colors.brand.primary};
-  }
-
-  &[data-creating="true"] {
-    background: none;
-  }
-`;
-
-const StyledCheck = styled(CheckLine)`
-  color: ${colors.support.green};
-`;
-
-const FolderNameLink = styled(SafeLink)`
-  display: grid;
-  align-items: center;
-  grid-template-columns: ${spacing.medium} 1fr auto;
-  padding: ${spacing.small} ${spacing.xxsmall};
-  padding-left: calc(0.75 * ${spacing.normal} * var(--level));
-  gap: ${spacing.xxsmall};
-  cursor: pointer;
-
-  border: none;
-  box-shadow: none;
-  color: ${colors.text.primary};
-  ${fonts.sizes("16px")};
-  transition: ${animations.durations.superFast};
-  word-break: break-word;
-  &[data-selected="true"] {
-    color: ${colors.brand.primary};
-    font-weight: ${fonts.weight.semibold};
-  }
-  &:hover,
-  &:focus {
-    color: ${colors.brand.primary};
-  }
-`;
-
-interface Props extends CommonFolderItemsProps {
-  isOpen: boolean;
-  folder: IFolder;
-  isCreatingFolder?: boolean;
-  index: number;
-}
-
-const FolderItem = ({
-  focusedFolder,
-  folder,
-  isOpen,
-  level,
-  loading,
-  selectedFolder,
-  onCloseFolder,
-  onOpenFolder,
-  setFocusedFolder,
-  setSelectedFolder,
-  targetResource,
-  visibleFolders,
-  maxLevel,
-  isCreatingFolder,
-  type,
-  closeTree,
-  index,
-}: Props) => {
-  const { t } = useTranslation();
-  const { id, name } = folder;
-  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const selected = selectedFolder ? selectedFolder.id === id : false;
-
-  const levelVariable = useMemo(() => ({ "--level": level }) as unknown as CSSProperties, [level]);
-
-  const focused = focusedFolder?.id === id;
-
-  const handleClickFolder = () => {
-    if (!selected) {
-      setSelectedFolder(folder);
-    }
-    setFocusedFolder(folder);
-    if (type === "picker") {
-      if (selected) {
-        closeTree();
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (focusedFolder?.id === id && !isCreatingFolder) {
-      if (type === "navigation") {
-        ref.current?.focus();
-      }
-      if (type === "picker") {
-        ref.current?.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-        });
-      }
-    }
-  }, [focusedFolder, ref, id, isCreatingFolder, type]);
-
-  const linkPath = `/minndla/folders/${id}`;
-
-  const containsResource =
-    targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
-
-  const emptyFolder = folder.subfolders.length === 0;
-  const isMaxDepth = level > maxLevel;
-  const hideArrow = isMaxDepth || emptyFolder;
-
-  const FolderIcon = folder.status === "shared" ? FolderUserFill : FolderLine;
-
-  const tabable = selected || focused || (!focusedFolder && !folder.parentId && index === 0);
-
-  return type === "navigation" ? (
-    <FolderNameLink
-      role="treeitem"
-      aria-owns={folder.subfolders.length ? treestructureId(type, `subfolders-${folder.id}`) : undefined}
-      aria-expanded={isMaxDepth || emptyFolder ? undefined : isOpen}
-      aria-current={selected ? "page" : undefined}
-      aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
-      ref={ref}
-      style={levelVariable}
-      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {
-        if (e.key === "Enter") {
-          setSelectedFolder(folder);
-          return;
-        }
-        arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
-      }}
-      to={loading ? "" : linkPath}
-      tabIndex={tabable ? 0 : -1}
-      data-selected={selected}
-      onFocus={() => setFocusedFolder(folder)}
-      onClick={handleClickFolder}
-    >
-      <OpenButton
-        aria-hidden
-        tabIndex={-1}
-        data-open={isOpen}
-        data-hide-arrow={hideArrow}
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          ref.current?.focus();
-          if (isOpen) {
-            onCloseFolder(id);
-          } else {
-            onOpenFolder(id);
-          }
-        }}
-      >
-        <ArrowDownShortLine />
-      </OpenButton>
-      <StyledName>{name}</StyledName>
-    </FolderNameLink>
-  ) : (
-    <FolderName
-      tabIndex={-1}
-      role="treeitem"
-      id={treestructureId(type, folder.id)}
-      aria-expanded={isMaxDepth || emptyFolder ? undefined : isOpen}
-      aria-selected={selected}
-      data-focused={focusedFolder?.id === folder.id}
-      aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
-      aria-label={`${name}${folder.status === "shared" ? `, ${t("myNdla.folder.sharing.shared")}` : ""}`}
-      variant="ghost"
-      shape="sharp"
-      fontWeight="normal"
-      colorTheme="light"
-      ref={ref}
-      style={levelVariable}
-      data-selected={selected}
-      disabled={loading}
-      onFocus={() => setFocusedFolder(focusedFolder || folder)}
-      onClick={handleClickFolder}
-      data-creating={isCreatingFolder}
-    >
-      <IconWrapper>
-        <OpenButton
-          aria-hidden
-          tabIndex={-1}
-          data-open={isOpen}
-          data-hide-arrow={hideArrow}
-          onClick={(e) => {
-            e.stopPropagation();
-            setFocusedFolder(folder);
-            if (isOpen) {
-              onCloseFolder(id);
-            } else {
-              onOpenFolder(id);
-            }
-          }}
-        >
-          <ArrowDownShortLine />
-        </OpenButton>
-        <FolderIconWrapper>
-          <FolderIcon />
-        </FolderIconWrapper>
-      </IconWrapper>
-      <StyledName>{name}</StyledName>
-      {containsResource && (
-        <StyledCheck
-          aria-label={t("myNdla.alreadyInFolder")}
-          id={`alreadyAdded-${folder.id}`}
-          title={t("myNdla.alreadyInFolder")}
-        />
-      )}
-    </FolderName>
-  );
-};
-
-export default FolderItem;

package/src/TreeStructure/FolderItems.tsx

@@ -1,121 +0,0 @@
-/**
- * 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 { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { animations } from "@ndla/core";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-import FolderItem from "./FolderItem";
-import { treestructureId } from "./helperFunctions";
-import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from "./types";
-
-const StyledUL = styled.ul`
-  ${animations.fadeInLeft(animations.durations.fast)};
-  animation-fill-mode: forwards;
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  list-style: none;
-  padding: 0;
-`;
-
-const StyledLI = styled.li`
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  &[data-type="navigation"] {
-    align-items: flex-start;
-  }
-`;
-
-export interface FolderItemsProps extends CommonFolderItemsProps {
-  folders: IFolder[];
-  newFolderParentId: string | undefined;
-  onCancelNewFolder: () => void;
-  openFolders: string[];
-  parentFolder?: IFolder;
-  children?: ReactNode;
-  onCreate: OnCreatedFunc;
-  newFolderInput?: NewFolderInputFunc;
-}
-
-const FolderItems = ({
-  folders,
-  level,
-  loading,
-  newFolderParentId,
-  onCancelNewFolder,
-  openFolders,
-  type,
-  parentFolder,
-  children,
-  onCreate,
-  newFolderInput,
-  ...rest
-}: FolderItemsProps) => (
-  <StyledUL
-    id={
-      level === 0 && type === "picker"
-        ? treestructureId(type, "popup")
-        : parentFolder
-          ? treestructureId(type, `subfolders-${parentFolder.id}`)
-          : undefined
-    }
-    tabIndex={-1}
-    aria-labelledby={level === 0 && type === "picker" ? treestructureId(type, "label") : undefined}
-    role={level === 0 ? "tree" : "group"}
-  >
-    {children}
-    {folders.map((folder, index) => {
-      const { subfolders, id } = folder;
-      const isOpen = openFolders?.includes(id);
-
-      return (
-        <StyledLI key={id} tabIndex={-1} role="none" data-type={type}>
-          <FolderItem
-            index={index}
-            folder={folder}
-            isOpen={isOpen}
-            level={level}
-            loading={loading}
-            type={type}
-            isCreatingFolder={!!newFolderParentId}
-            {...rest}
-          />
-          {((subfolders && isOpen) || newFolderParentId === id) && (
-            <FolderItems
-              parentFolder={folder}
-              folders={subfolders}
-              level={level + 1}
-              loading={loading}
-              type={type}
-              newFolderParentId={newFolderParentId}
-              onCancelNewFolder={onCancelNewFolder}
-              openFolders={openFolders}
-              newFolderInput={newFolderInput}
-              onCreate={onCreate}
-              {...rest}
-            >
-              {newFolderParentId === id && (
-                <li role="none">
-                  {newFolderInput?.({
-                    parentId: id,
-                    onClose: onCancelNewFolder,
-                    onCreate,
-                  })}
-                </li>
-              )}
-            </FolderItems>
-          )}
-        </StyledLI>
-      );
-    })}
-  </StyledUL>
-);
-
-export default FolderItems;