@ndla/ui 13.2.2 → 15.1.0

package/src/TagSelector/SuggestionInput.tsx

@@ -0,0 +1,230 @@
+/*
+ * 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, { useState, useRef, useEffect, ReactNode, RefObject, ChangeEvent, KeyboardEvent } from 'react';
+import { isMobile } from 'react-device-detect';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import Button, { IconButtonDualStates } from '@ndla/button';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import { Cross as CrossRaw } from '@ndla/icons/action';
+import { spacing, colors, misc, animations, fonts } from '@ndla/core';
+import Tooltip from '@ndla/tooltip';
+import { uuid } from '@ndla/util';
+import Suggestions from './Suggestions';
+import type { TagType } from './TagSelector';
+
+const Cross = styled(CrossRaw)`
+  margin-left: ${spacing.xxsmall};
+`;
+
+const SuggestionInputContainer = styled.div`
+  margin-bottom: ${spacing.large};
+`;
+
+const StyledInput = styled.input`
+  flex-grow: 1;
+  border: 0;
+  outline: none;
+  background: transparent;
+  ${fonts.sizes(18)};
+`;
+const StyledInputWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${spacing.xsmall};
+  padding: ${spacing.small};
+  border: 1px solid ${colors.brand.greyLighter};
+  transition: border-color ${animations.durations.normal} ease;
+  border-radius: ${misc.borderRadius};
+  &:focus-within {
+    border-color: ${colors.brand.primary};
+  }
+`;
+
+const CombinedInputAndDropdownWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+
+interface SuggestionInputProps {
+  suggestions: TagType[];
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  setExpanded: (expanded: boolean) => void;
+  expanded: boolean;
+  onToggleTag: (id: string) => void;
+  setInputValue: (value: string) => void;
+  onCreateTag: (tagName: string) => void;
+  addedTags: TagType[];
+  dropdownMaxHeight: string;
+  prefix?: string | ReactNode;
+  inline?: boolean;
+  scrollAnchorElement: RefObject<HTMLDivElement>;
+}
+
+const SuggestionInput = ({
+  suggestions,
+  value,
+  setInputValue,
+  onCreateTag,
+  onChange,
+  onToggleTag,
+  addedTags,
+  setExpanded,
+  expanded,
+  dropdownMaxHeight,
+  prefix,
+  inline,
+  scrollAnchorElement,
+}: SuggestionInputProps) => {
+  const { t } = useTranslation();
+  const [currentHighlightedIndex, setCurrentHighlightedIndex] = useState(0);
+  const [hasFocus, setHasFocus] = useState(false);
+  const initalRender = useRef(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const suggestionIdRef = useRef<string>(uuid());
+
+  useEffect(() => {
+    setCurrentHighlightedIndex(0);
+  }, [suggestions]);
+
+  useEffect(() => {
+    if (!initalRender.current) {
+      inputRef.current?.focus();
+    } else {
+      initalRender.current = false;
+    }
+  }, [addedTags]);
+
+  useEffect(() => {
+    const selectedSuggestionElement = document
+      .getElementById(suggestionIdRef.current)
+      ?.querySelector('[aria-selected="true"]');
+    if (selectedSuggestionElement) {
+      // Do we need to scroll this into view?
+      selectedSuggestionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, [currentHighlightedIndex]);
+
+  const hasBeenAdded = (id: string) => addedTags.some(({ id: idAdded }) => idAdded === id);
+
+  return (
+    <SuggestionInputContainer ref={containerRef}>
+      <StyledInputWrapper>
+        {addedTags.map(({ id, name }) => (
+          <Button
+            aria-label={t('tagSelector.removeTag', { name })}
+            onClick={() => onToggleTag(id)}
+            light
+            borderShape="rounded"
+            key={id}
+            size="small">
+            {prefix}
+            {name}
+            <Cross />
+          </Button>
+        ))}
+        <CombinedInputAndDropdownWrapper>
+          <StyledInput
+            placeholder={t('tagSelector.placeholder')}
+            value={value}
+            autoComplete="off"
+            onBlur={(e) => {
+              const relatedTarget = e.relatedTarget as HTMLElement;
+              if (!relatedTarget?.dataset?.suggestionbutton) {
+                setExpanded(false);
+                setHasFocus(false);
+              }
+            }}
+            onChange={onChange}
+            onFocus={() => {
+              if (isMobile && scrollAnchorElement?.current) {
+                scrollAnchorElement.current.scrollIntoView({
+                  behavior: 'smooth',
+                });
+              }
+              setHasFocus(true);
+            }}
+            ref={inputRef}
+            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              if (e.key === 'Escape') {
+                setExpanded(false);
+                e.preventDefault();
+              } else if (e.key === 'Enter' || e.key === 'Tab') {
+                if (value !== '' || expanded) {
+                  if (suggestions.length > 0) {
+                    if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
+                      onToggleTag(suggestions[currentHighlightedIndex].id);
+                    }
+                    setInputValue('');
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                    }
+                  } else {
+                    onCreateTag(value);
+                    setInputValue('');
+                    e.preventDefault();
+                  }
+                } else if (e.key === 'Enter') {
+                  e.preventDefault();
+                }
+              } else if (e.key === 'ArrowUp') {
+                setCurrentHighlightedIndex(
+                  currentHighlightedIndex - 1 < 0 ? suggestions.length - 1 : currentHighlightedIndex - 1,
+                );
+                e.preventDefault();
+              } else if (e.key === 'ArrowDown') {
+                setCurrentHighlightedIndex(
+                  currentHighlightedIndex + 1 >= suggestions.length ? 0 : currentHighlightedIndex + 1,
+                );
+                e.preventDefault();
+              }
+            }}
+          />
+          <Tooltip tooltip={expanded ? t('tagSelector.hideAllTags') : t('tagSelector.showAllTags')}>
+            <IconButtonDualStates
+              data-suggestionbutton
+              ariaLabelActive={t('tagSelector.showAllTags')}
+              ariaLabelInActive={t('tagSelector.hideAllTags')}
+              active={expanded}
+              greyLighter
+              inactiveIcon={<ChevronDown />}
+              activeIcon={<ChevronUp />}
+              size="small"
+              aria-controls={suggestionIdRef.current}
+              onClick={() => {
+                setInputValue('');
+                setExpanded(!expanded);
+                inputRef.current?.focus();
+              }}
+            />
+          </Tooltip>
+        </CombinedInputAndDropdownWrapper>
+      </StyledInputWrapper>
+      <div id={suggestionIdRef.current} aria-live="polite">
+        {(hasFocus || expanded) && suggestions.length > 0 ? (
+          <Suggestions
+            inline={inline}
+            dropdownMaxHeight={dropdownMaxHeight}
+            suggestions={suggestions}
+            currentHighlightedIndex={currentHighlightedIndex}
+            onToggleTag={onToggleTag}
+            hasBeenAdded={hasBeenAdded}
+          />
+        ) : null}
+      </div>
+    </SuggestionInputContainer>
+  );
+};
+
+export default SuggestionInput;

package/src/TagSelector/Suggestions.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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 from 'react';
+import styled from '@emotion/styled';
+import { Check } from '@ndla/icons/editor';
+import { spacing, colors, misc, animations, fonts, shadows } from '@ndla/core';
+import Button from '@ndla/button';
+import type { TagType } from './TagSelector';
+
+const ABSOLUTE_DROPDOWN_MAXHEIGHT = '360px';
+
+const CheckedIcon = styled(Check)`
+  width: ${spacing.normal};
+  height: ${spacing.normal};
+  fill: ${colors.brand.light};
+`;
+
+interface SuggestionsWrapperProps {
+  dropdownMaxHeight: string;
+  inline?: boolean;
+}
+
+const SuggestionsWrapper = styled.div`
+  position: relative;
+`;
+
+const Suggestions = styled.div<SuggestionsWrapperProps>`
+  position: ${({ inline }) => (inline ? 'static' : 'absolute')};
+  z-index: 99999;
+  right: 0;
+  left: 0;
+  box-shadow: ${shadows.levitate1};
+  margin: 0 ${spacing.small};
+  padding: ${spacing.small} 0;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  max-height: min(${({ dropdownMaxHeight }) => dropdownMaxHeight}, ${ABSOLUTE_DROPDOWN_MAXHEIGHT});
+  border-radius: ${misc.borderRadius};
+  background: ${colors.white};
+  ${animations.fadeIn(animations.durations.fast)}
+`;
+
+const SuggestionList = styled.div`
+  opacity: 0;
+  ${animations.fadeInBottom()}
+  animation-delay: ${animations.durations.fast};
+  animation-fill-mode: forwards;
+`;
+
+interface SuggestionButtonProps {
+  isHighlighted: boolean;
+}
+
+const SuggestionButton = styled(Button)<SuggestionButtonProps>`
+  display: flex;
+  justify-content: space-between;
+  ${fonts.sizes(18)};
+  transition: ${misc.transition.default};
+  font-weight: 400;
+
+  &:disabled {
+    color: ${colors.brand.greyMedium};
+    &:hover {
+      svg {
+        fill: ${colors.brand.greyLight};
+      }
+    }
+  }
+`;
+
+interface Props {
+  inline?: boolean;
+  dropdownMaxHeight: string;
+  suggestions: TagType[];
+  currentHighlightedIndex: number;
+  onToggleTag: (id: string) => void;
+  hasBeenAdded: (id: string) => boolean;
+}
+
+const TagSuggestions = ({
+  inline,
+  dropdownMaxHeight,
+  suggestions,
+  currentHighlightedIndex,
+  onToggleTag,
+  hasBeenAdded,
+}: Props) => (
+  <SuggestionsWrapper>
+    <Suggestions inline={inline} dropdownMaxHeight={dropdownMaxHeight}>
+      <SuggestionList role="listbox">
+        {suggestions.map(({ id, name }, index: number) => {
+          const alreadyAdded = hasBeenAdded(id);
+          const selected = index === currentHighlightedIndex;
+          return (
+            <SuggestionButton
+              borderShape="sharpened"
+              ghostPill
+              width="full"
+              textAlign="left"
+              data-suggestionbutton
+              role="option"
+              aria-selected={selected}
+              disabled={alreadyAdded}
+              isHighlighted={selected}
+              onMouseDown={() => {
+                onToggleTag(id);
+              }}
+              key={id}>
+              <span>{name}</span>
+              {alreadyAdded && <CheckedIcon />}
+            </SuggestionButton>
+          );
+        })}
+      </SuggestionList>
+    </Suggestions>
+  </SuggestionsWrapper>
+);
+
+export default TagSuggestions;

package/src/TagSelector/TagSelector.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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, { useState, useRef, useEffect, ChangeEvent } from 'react';
+import styled from '@emotion/styled';
+import { spacingUnit, fonts } from '@ndla/core';
+import { uuid } from '@ndla/util';
+import SuggestionInput from './SuggestionInput';
+
+const DEFAULT_DROPDOWN_MAXHEIGHT = '240px';
+
+const StyledLabel = styled.label`
+  font-weight: ${fonts.weight.semibold};
+`;
+
+export interface TagType {
+  name: string;
+  id: string;
+}
+
+interface Props {
+  label: string;
+  tags: TagType[];
+  tagsSelected: string[];
+  onToggleTag: (id: string) => void;
+  onCreateTag: (tagName: string) => void;
+  inline?: boolean;
+  prefix?: string;
+}
+
+const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] =>
+  tags
+    .filter(({ id }) => selectedTags.some((idSelected) => idSelected === id))
+    .sort((a, b) => a.name.localeCompare(b.name, 'nb'));
+
+const getSuggestions = (tags: TagType[], inputValue: string): TagType[] => {
+  if (inputValue === '') {
+    return [];
+  }
+  const inputLowercase = inputValue.toLowerCase();
+  return tags
+    .filter(({ name }) => name.toLowerCase().startsWith(inputLowercase))
+    .sort((a, b) => a.name.localeCompare(b.name, 'nb'));
+};
+
+const TagSelector = ({ label, tags, tagsSelected, onCreateTag, onToggleTag, inline, prefix }: Props) => {
+  const [inputValue, setInputValue] = useState('');
+  const [expanded, setExpanded] = useState(false);
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState(DEFAULT_DROPDOWN_MAXHEIGHT);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputIdRef = useRef<string>(uuid());
+
+  useEffect(() => {
+    setExpanded(false);
+  }, [tagsSelected]);
+
+  useEffect(() => {
+    const setMaxDropdownMaxHeight = () => {
+      if (!inline && containerRef.current && typeof window !== 'undefined') {
+        // Calculate distance from bottom of container to bottom of viewport
+        const containerBottom = containerRef.current.getBoundingClientRect().bottom;
+        const viewportBottom = document.documentElement.scrollHeight;
+        const maxDropdownHeight = viewportBottom - containerBottom;
+        setDropdownMaxHeight(`${maxDropdownHeight - spacingUnit}px`);
+      }
+    };
+    if (!inline && typeof window !== 'undefined') {
+      if (expanded) {
+        setMaxDropdownMaxHeight();
+        window.addEventListener('resize', setMaxDropdownMaxHeight);
+      } else {
+        window.removeEventListener('resize', setMaxDropdownMaxHeight);
+      }
+    }
+    return () => {
+      typeof window !== 'undefined' && window.removeEventListener('resize', setMaxDropdownMaxHeight);
+    };
+  }, [expanded, inline]);
+
+  return (
+    <div ref={containerRef}>
+      <StyledLabel htmlFor={inputIdRef.current}>{label}</StyledLabel>
+      <SuggestionInput
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          const target = e.target as HTMLInputElement;
+          setInputValue(target.value);
+          setExpanded(false);
+        }}
+        suggestions={expanded ? tags : getSuggestions(tags, inputValue)}
+        value={inputValue}
+        onCreateTag={onCreateTag}
+        onToggleTag={onToggleTag}
+        setInputValue={setInputValue}
+        addedTags={sortedTags(tags, tagsSelected)}
+        expanded={expanded}
+        setExpanded={setExpanded}
+        dropdownMaxHeight={dropdownMaxHeight}
+        inline={inline}
+        scrollAnchorElement={containerRef}
+        prefix={prefix}
+      />
+    </div>
+  );
+};
+
+export default TagSelector;

package/src/TagSelector/index.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 TagSelector, { TagType } from './TagSelector';
+
+export type { TagType };
+
+export { TagSelector };

package/src/TopicIntroductionList/TopicIntroduction.tsx

@@ -64,12 +64,12 @@ export const TopicIntroduction = ({
             {contentTypeDescription}
           </span>
           {additional && (
-            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')} align="left">
+            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')}>
               <Additional className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
           {!additional && showAdditionalCores && (
-            <Tooltip tooltip={t('resource.tooltipCoreTopic')} align="left">
+            <Tooltip tooltip={t('resource.tooltipCoreTopic')}>
               <Core className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}

package/src/TopicIntroductionList/TopicShortcutItem.tsx

@@ -17,11 +17,7 @@ interface Props {
 const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }: Props) => {
   const { t } = useTranslation();
   return (
-    <Tooltip
-      id={`shortcut-tooltip-${id}`}
-      tooltip={t('resource.shortcutsTooltip', { count })}
-      delay={100}
-      align="bottom">
+    <Tooltip id={`shortcut-tooltip-${id}`} tooltip={t('resource.shortcutsTooltip', { count })}>
       <SafeLink {...classes('item-link')} aria-label={tooltip} to={url}>
         <ContentTypeBadge type={contentType} size="x-small" background />
         <span {...classes('count')}>{count}</span>

package/src/TreeStructure/FolderItem.tsx

@@ -0,0 +1,160 @@
+/**
+ * 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, { useEffect, useRef } from 'react';
+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';
+
+const OpenButton = styled.button<{ isOpen: boolean }>`
+  background: transparent;
+  border: 0;
+  transform: rotate(${({ isOpen }) => (isOpen ? '0' : '-90')}deg);
+  padding: ${spacing.xsmall};
+  display: flex;
+  margin: 0;
+  color: ${colors.brand.secondary};
+  cursor: pointer;
+  &:hover {
+    color: ${colors.brand.primary};
+  }
+  svg {
+    width: 16px;
+    height: 16px;
+    transform: ${({ isOpen }) => (isOpen ? 'translateX(3px)' : 'translateY(3px)')};
+  }
+`;
+
+const FolderItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
+  line-height: 1;
+  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+  color: ${colors.text.primary};
+  &:hover,
+  &:focus {
+    background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
+    color: ${colors.brand.primary};
+  }
+  transition: ${animations.durations.superFast};
+  border: 0;
+  border-radius: ${misc.borderRadius};
+  display: flex;
+  gap: ${spacing.xxsmall};
+  align-items: center;
+  cursor: pointer;
+  padding: ${spacing.xsmall};
+  margin: 0;
+  margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
+  flex-grow: 1;
+  box-shadow: none;
+`;
+
+const FolderNameLink = FolderName.withComponent('a');
+
+interface Props {
+  name: string;
+  id: string;
+  onToggleOpen: (id: string) => void;
+  onMarkFolder: (id: string) => void;
+  isOpen: boolean;
+  markedFolderId?: string;
+  focusedFolderId?: string;
+  loading?: boolean;
+  openOnFolderClick?: boolean;
+  hideArrow?: boolean;
+  setFocusedFolderId: SetFocusedFolderId;
+  url?: string;
+  icon?: React.ReactNode;
+  noPaddingWhenArrowIsHidden?: boolean;
+}
+
+const FolderItem = ({
+  hideArrow,
+  loading,
+  name,
+  id,
+  onToggleOpen,
+  onMarkFolder,
+  isOpen,
+  markedFolderId,
+  focusedFolderId,
+  openOnFolderClick,
+  setFocusedFolderId,
+  icon,
+  url,
+  noPaddingWhenArrowIsHidden,
+}: Props) => {
+  const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
+  const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    if (focusedFolderId === id) {
+      if (url && folderNameLinkRef.current) {
+        folderNameLinkRef.current.focus();
+      } else if (folderNameButtonRef.current) {
+        folderNameButtonRef.current.focus();
+      }
+    }
+  }, [focusedFolderId, folderNameLinkRef, folderNameButtonRef, url, id]);
+  const marked = markedFolderId === id;
+  return (
+    <FolderItemWrapper>
+      {!hideArrow && (
+        <OpenButton tabIndex={-1} isOpen={isOpen} disabled={loading} onClick={() => onToggleOpen(id)}>
+          <ArrowDropDown />
+        </OpenButton>
+      )}
+      {url ? (
+        <FolderNameLink
+          ref={folderNameLinkRef}
+          noArrow={hideArrow}
+          tabIndex={marked ? 0 : -1}
+          marked={marked}
+          href={loading ? undefined : url}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            onMarkFolder(id);
+            if (openOnFolderClick) {
+              onToggleOpen(id);
+            }
+          }}>
+          {icon || <FolderOutlined />}
+          {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>
+      )}
+    </FolderItemWrapper>
+  );
+};
+
+export default FolderItem;