@ndla/ui 27.1.7 → 29.0.0

package/src/TagSelector/SelectContainer.tsx

@@ -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 styled from '@emotion/styled';
+import { colors, fonts, misc } from '@ndla/core';
+import React from 'react';
+import { ContainerProps } from 'react-select';
+import { TagType } from './types';
+
+const StyledContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+
+  border: 1px solid ${colors.brand.neutral7};
+  border-radius: ${misc.borderRadius};
+  &:focus-within {
+    border-color: ${colors.brand.tertiary};
+  }
+  ${fonts.sizes(16)};
+`;
+
+const SelectContainer = ({ innerProps, selectProps, children }: ContainerProps<TagType, true>) => {
+  return <StyledContainer {...innerProps}>{children}</StyledContainer>;
+};
+
+export default SelectContainer;

package/src/TagSelector/TagSelector.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2022-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -6,107 +6,128 @@
  *
  */
 
-import React, { useState, useRef, useEffect, ChangeEvent } from 'react';
+import React, { KeyboardEvent, useMemo, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import { MultiValue, StylesConfig } from 'react-select';
 import styled from '@emotion/styled';
-import { spacingUnit, fonts } from '@ndla/core';
-import { uuid } from '@ndla/util';
-import SuggestionInput from './SuggestionInput';
+import { colors, fonts, spacing, utils } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import { TagType } from './types';
+import ValueButton from './ValueButton';
+import DropdownIndicator from './DropdownIndicator';
+import SelectContainer from './SelectContainer';
+import MenuList from './MenuList';
+import Control from './Control';
+import Option from './Option';
+import Menu from './Menu';
+import { createAriaMessages } from './ariaMessages';
+import Input from './Input';
 
-const DEFAULT_DROPDOWN_MAXHEIGHT = '240px';
+const styles: StylesConfig<TagType, true> = {
+  menu: () => ({}),
+  dropdownIndicator: () => ({}),
+  placeholder: (provided) => ({
+    ...provided,
+    padding: `0 ${spacing.small}`,
+    color: colors.brand.primary,
+    margin: 0,
+  }),
+  valueContainer: (provided) => ({ ...provided, padding: 0 }),
+  indicatorSeparator: () => ({
+    display: 'none',
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    alignSelf: 'flex-end',
+  }),
+};
 
-const StyledLabel = styled.label`
-  font-weight: ${fonts.weight.semibold};
+const StyledTagSelector = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 `;
 
-export interface TagType {
-  name: string;
-  id: string;
+interface StyledLabelProps {
+  labelHidden?: boolean;
 }
 
+const StyledLabel = styled.label<StyledLabelProps>`
+  font-weight: ${fonts.weight.semibold};
+  ${(p) => p.labelHidden && utils.labelHidden}
+`;
+
 interface Props {
   label: string;
-  tags: TagType[];
-  tagsSelected: string[];
-  onToggleTag: (id: string) => void;
-  onCreateTag: (tagName: string) => void;
-  inline?: boolean;
-  prefix?: string;
+  tags: string[];
+  selected: string[];
+  onChange: (tags: string[]) => void;
+  onCreateTag: (name: string) => void;
+  className?: string;
+  labelHidden?: boolean;
 }
 
-const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] => {
-  const returnTags = selectedTags
-    .map((selectedId) => tags.find(({ id }) => selectedId === id))
-    .filter((notUndefined) => notUndefined) as unknown as TagType[];
-  return returnTags;
-};
+const TagSelector = ({ selected: _selected, tags: _tags, onChange, onCreateTag, className, label }: Props) => {
+  const { t } = useTranslation();
+  const [input, setInput] = useState('');
+  const tags = useMemo(() => _tags.map((tag) => ({ value: tag, label: tag })), [_tags]);
+  const selected = useMemo(() => _selected.map((tag) => ({ value: tag, label: tag })), [_selected]);
 
-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);
+  const handleSpaceClick = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === ' ') {
+      e.preventDefault();
+      if (!_selected.find((tag) => tag === input) && input !== '') {
+        onChange(_selected.concat(input));
       }
+      setInput('');
     }
-    return () => {
-      typeof window !== 'undefined' && window.removeEventListener('resize', setMaxDropdownMaxHeight);
-    };
-  }, [expanded, inline]);
+  };
+
+  const handleChange = (tags: MultiValue<TagType>) => {
+    onChange(tags.map((tag) => tag.value));
+  };
+
+  const createLabel = (tag: string) => t('tagSelector.createLabel', { tag });
 
   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);
+    <StyledTagSelector className={className}>
+      {label && (
+        <StyledLabel labelHidden htmlFor="tagselector-creatable" id="tagselector-label">
+          {label}
+        </StyledLabel>
+      )}
+      <CreatableSelect
+        id="tagselector-creatable"
+        aria-labelledby={label ? 'tagselector-label' : undefined}
+        ariaLiveMessages={createAriaMessages(t)}
+        components={{
+          DropdownIndicator,
+          MultiValue: ValueButton,
+          SelectContainer,
+          MenuList,
+          Control,
+          Option,
+          Menu,
+          Input,
         }}
-        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}
+        formatCreateLabel={createLabel}
+        inputValue={input}
+        isClearable={false}
+        isMulti
+        noOptionsMessage={() => t('tagSelector.noOptions')}
+        onChange={handleChange}
+        onCreateOption={onCreateTag}
+        onInputChange={setInput}
+        onKeyDown={handleSpaceClick}
+        options={tags}
+        placeholder={t('tagSelector.placeholder')}
+        screenReaderStatus={({ count }) => t('tagSelector.aria.screenReaderStatus', { count })}
+        styles={styles}
+        tabSelectsValue={false}
+        value={selected}
       />
-    </div>
+    </StyledTagSelector>
   );
 };
 

package/src/TagSelector/ValueButton.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { MultiValueProps } from 'react-select';
+import { buttonStyleV2 as buttonStyle } from '@ndla/button';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
+import { TagType } from './types';
+
+interface StyledProps {
+  selected: boolean;
+}
+
+export const StyledValueButton = styled.div<StyledProps>`
+  && {
+    background: ${({ selected }) => selected && colors.brand.primary};
+    color: ${({ selected }) => selected && colors.white};
+    padding: ${spacing.xxsmall} ${spacing.small};
+    margin: ${spacing.xxsmall};
+    border: none;
+  }
+`;
+
+const ValueButton = ({ innerProps, children, removeProps, isFocused }: MultiValueProps<TagType, true>) => {
+  return (
+    <StyledValueButton
+      selected={isFocused}
+      role="button"
+      css={buttonStyle({ colorTheme: 'lighter', shape: 'pill', size: 'small' })}
+      {...innerProps}
+      {...removeProps}>
+      <span aria-hidden>#</span>
+      {children}
+      <Cross />
+    </StyledValueButton>
+  );
+};
+
+export default ValueButton;

package/src/TagSelector/ariaMessages.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 { TFunction } from 'react-i18next';
+import {
+  AriaGuidanceProps,
+  AriaOnChangeProps,
+  AriaOnFilterProps,
+  AriaOnFocusProps,
+  GroupBase,
+  OptionsOrGroups,
+} from 'react-select';
+import { TagType } from './types';
+
+export const createAriaMessages = (t: TFunction) => ({
+  guidance: (props: AriaGuidanceProps) => {
+    const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } = props;
+    switch (context) {
+      case 'menu':
+        return `${t('tagSelector.aria.guidance.menu.updown')}${
+          isDisabled ? '' : `, ${t('tagSelector.aria.guidance.menu.enter')}`
+        }, ${t('tagSelector.aria.guidance.menu.escape')}${
+          tabSelectsValue ? `, ${t('tagSelector.aria.guidance.menu.tab')}` : ''
+        }.`;
+      case 'input':
+        return `${props['aria-label'] || t('tagSelector.aria.guidance.input.select')} ${t(
+          'tagSelector.aria.guidance.input.focused',
+        )} ${isSearchable ? `, ${t('tagSelector.aria.guidance.input.refine')}` : ''}, ${t(
+          'tagSelector.aria.guidance.input.down',
+        )}, ${isMulti ? ` ${t('tagSelector.aria.guidance.input.left')}` : ''}, ${t(
+          'tagSelector.aria.guidance.input.space',
+        )}`;
+      case 'value':
+        return t('tagSelector.aria.guidance.value');
+      default:
+        return '';
+    }
+  },
+
+  onChange: (props: AriaOnChangeProps<TagType, true>) => {
+    const { action, label = '', labels, isDisabled } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return t('tagSelector.aria.onChange.deselect', { label });
+      case 'clear':
+        return t('tagSelector.aria.onChange.clear');
+      case 'initial-input-focus':
+        return t('tagSelector.aria.onChange.initialFocus', { labels: labels.join(',') });
+      case 'select-option':
+        return isDisabled
+          ? t('tagSelector.aria.onChange.selectedDisabled', { label })
+          : t('tagSelector.aria.onChange.selected', { label });
+      default:
+        return '';
+    }
+  },
+
+  onFocus: (props: AriaOnFocusProps<TagType, GroupBase<TagType>>) => {
+    const { context, focused, options, label = '', selectValue, isDisabled, isSelected } = props;
+
+    const getArrayIndex = (arr: OptionsOrGroups<TagType, GroupBase<TagType>>, item: TagType) =>
+      arr && arr.length ? `${arr.indexOf(item) + 1} ${t('tagSelector.aria.onFocus.of')} ${arr.length}` : '';
+
+    if (context === 'value' && selectValue) {
+      return t('tagSelector.aria.onFocus.value', { label, position: getArrayIndex(selectValue, focused) });
+    }
+
+    if (context === 'menu') {
+      const disabled = isDisabled ? ` ${t('tagSelector.aria.disabled')}` : '';
+      const status = `${isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')}${disabled}`;
+      return t('tagSelector.aria.onFocus.menu', { label, status, position: getArrayIndex(options, focused) });
+    }
+    return '';
+  },
+
+  onFilter: (props: AriaOnFilterProps) => {
+    const { inputValue, resultsMessage } = props;
+    return `${resultsMessage}${inputValue ? ` ${t('tagSelector.aria.onFilter')} ` + inputValue : ''}.`;
+  },
+});

package/src/TagSelector/index.ts

@@ -6,7 +6,8 @@
  *
  */
 
-import TagSelector, { TagType } from './TagSelector';
+import TagSelector from './TagSelector';
+import { TagType } from './types';
 
 export type { TagType };
 

package/src/TagSelector/types.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+
+export interface TagType {
+  readonly value: string;
+  readonly label: string;
+}

package/src/TreeStructure/ComboboxButton.tsx

@@ -31,6 +31,7 @@ const StyledSelectedFolder = styled(Button)`
   flex: 1;
   justify-content: flex-start;
   color: ${colors.black};
+  border: none;
   :hover,
   :focus {
     background: none;
@@ -82,6 +83,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
 
     const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
       if (e.key === 'Enter') {
+        onToggleTree(!showTree);
         if (showTree && focusedFolder) {
           setSelectedFolder(focusedFolder);
         }
@@ -89,6 +91,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       }
       if (e.key === 'Escape') {
         onToggleTree(false);
+        e.preventDefault();
         return;
       }
       if (['ArrowUp', 'ArrowDown'].includes(e.key) && !showTree) {
@@ -101,7 +104,16 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
     };
 
     return (
-      <StyledRow isOpen={showTree}>
+      <StyledRow
+        isOpen={showTree}
+        onMouseDown={(e) => {
+          if (!e.defaultPrevented) {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggleTree(!showTree);
+            innerRef.current?.focus();
+          }
+        }}>
         <StyledSelectedFolder
           ref={innerRef}
           tabIndex={0}
@@ -116,24 +128,10 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           colorTheme="light"
           fontWeight="normal"
           shape="sharp"
-          onKeyDown={onKeyDown}
-          onClick={() => {
-            innerRef.current?.focus();
-            onToggleTree(!showTree);
-          }}>
+          onKeyDown={onKeyDown}>
           {selectedFolder?.name}
         </StyledSelectedFolder>
-        <IconButton
-          aria-hidden
-          aria-label=""
-          tabIndex={-1}
-          variant="ghost"
-          colorTheme="greyLighter"
-          size="small"
-          onClick={() => {
-            innerRef.current?.focus();
-            onToggleTree(!showTree);
-          }}>
+        <IconButton aria-hidden aria-label="" tabIndex={-1} variant="ghost" colorTheme="greyLighter" size="small">
           {showTree ? <ChevronUp /> : <ChevronDown />}
         </IconButton>
       </StyledRow>

package/src/TreeStructure/TreeStructure.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
-import { colors, fonts, misc, spacing } from '@ndla/core';
+import { colors, fonts, misc, utils } from '@ndla/core';
 import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
@@ -62,16 +62,7 @@ const ScrollableDiv = styled.div<ScrollableDivProps>`
     type === 'picker' &&
     css`
       overflow: overlay;
-      ::-webkit-scrollbar {
-        width: ${spacing.small};
-      }
-      ::-webkit-scrollbar-thumb {
-        border: 4px solid transparent;
-        border-radius: 14px;
-        background-clip: padding-box;
-        padding: 0 4px;
-        background-color: ${colors.brand.neutral7};
-      }
+      ${utils.scrollbar}
     `}
 `;
 

package/src/locale/messages-en.ts

@@ -30,11 +30,50 @@ const messages = {
     },
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} results available',
+      disabled: 'disabled',
+      selected: 'selected',
+      focused: 'focused',
+      guidance: {
+        menu: {
+          updown: 'Use Up and Down to choose tags',
+          enter: 'press Enter to select the currently focused tag',
+          escape: 'press Escape to exit the menu',
+          tab: 'press Tab to select the tag and exit the menu',
+        },
+        input: {
+          select: 'Tag menu',
+          focused: 'is focused',
+          refine: 'type to refine list',
+          down: 'press Down to open the menu',
+          left: 'press Left to focus selected tags',
+          space: 'press Space to create new tag',
+        },
+        value:
+          'Use left and right to toggle between focused tags, press Backspace to remove the currently focused value. The last tag will be removed if none are selected.',
+      },
+      onChange: {
+        deselect: 'tag {{label}}, deselected.',
+        clear: 'All selected options have been cleared.',
+        initialFocus: `Tags {{labels}}, selected.`,
+        selectedDisabled: 'Tag {{label}} is disabled. Select another option.',
+        selected: 'Tag {{label}}, selected.',
+      },
+      onFocus: {
+        value: 'tag {{label}} focused, {{position}}.',
+        menu: 'tag {{label}} {{status}}, {{position}}.',
+        of: 'of',
+      },
+      onFilter: ' for search term ',
+    },
+    noOptions: 'No options',
     label: 'Add tag',
+    createLabel: 'Add tag {{tag}}',
     placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
-    hideAllTags: 'Hide all tags',
-    showAllTags: 'Show all tags',
+    hideTags: 'Hide tags',
+    showTags: 'Show tags',
   },
   htmlTitles: {
     titleTemplate,
@@ -71,9 +110,7 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Active',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Expired',
     [subjectCategories.BETA_SUBJECTS]: 'Revised',
-    [subjectCategories.COMMON_SUBJECTS]: 'Common core subj.',
-    [subjectCategories.PROGRAMME_SUBJECTS]: 'Programme subj. SF',
-    [subjectCategories.SPECIALIZED_SUBJECTS]: 'Programme subj. YF',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Other resources',
   },
   subjectTypes: {
     [subjectTypes.SUBJECT]: 'Subject',
@@ -1047,10 +1084,10 @@ const messages = {
       deleteAccount: 'Delete My NDLA',
       welcome:
         'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
-      read: { our: 'Read our', ours: 'Read our' },
+      read: { read: 'Read our', our: '.' },
       privacy: 'privacy statement',
       privacyLink: 'https://om.ndla.no/gdpr',
-      questions: { question: 'Any questions?', ask: 'Ask us in the chat' },
+      questions: { question: 'Any questions?', ask: 'Ask NDLA' },
       wishToDelete: 'Do you wish to delete your account?',
       terms: {
         terms: 'Terms of use',
@@ -1069,11 +1106,11 @@ const messages = {
       },
       folderInfo: {
         title: 'How to organise your favourite resources in folders',
-        text: 'You can get to the folder overview by clicking on my folders on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
+        text: 'You can get to the folder overview by clicking on <strong>My folders</strong> on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
       },
       tagInfo: {
         title: 'How to tag your favourite resources',
-        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting my tags on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
+        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting <strong>My tags</strong> on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
       },
     },
     resource: {