@ndla/ui 14.0.0 → 15.0.0

package/src/SnackBar/SnackBar.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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, { ReactElement, useRef, useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import Button, { IconButton } from '@ndla/button';
+import { spacing, spacingUnit, shadows, misc, fonts, colors, mq, breakpoints } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
+import { useTranslation } from 'react-i18next';
+
+const StyledActionButton = styled(Button)`
+  color: ${colors.white};
+  padding: ${spacing.xsmall} ${spacing.small};
+  box-shadow: none;
+  &:focus,
+  &:hover {
+    color: ${colors.brand.greyLightest};
+    background: ${colors.brand.greyDark};
+    &:after {
+      opacity: 0;
+    }
+  }
+  &:after {
+    content: '';
+    display: flex;
+    height: 1px;
+    width: 100%;
+    background: ${colors.white};
+    transform: translateY(-2px);
+  }
+`;
+
+const StyledIconButton = styled(IconButton)`
+  svg {
+    color: ${colors.brand.greyMedium};
+  }
+  &:hover,
+  &:focus {
+    background: ${colors.brand.greyDark};
+    svg {
+      color: ${colors.brand.greyLightest};
+    }
+  }
+`;
+
+const WrapperForButtons = styled.div`
+  display: flex;
+  ${mq.range({ from: breakpoints.tablet })} {
+    gap: ${spacing.xxsmall};
+  }
+`;
+
+interface StyledProps {
+  expired?: boolean;
+}
+
+const Wrapper = styled.div`
+  position: fixed;
+  z-index: 99999;
+  bottom: ${spacing.small};
+  left: ${spacing.small};
+  right: ${spacing.small};
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledNotification = styled.div<StyledProps>`
+  max-width: 960px;
+  ${fonts.sizes(18, 1.25)};
+  background: ${colors.text.primary};
+  color: ${colors.white};
+  box-shadow: ${shadows.levitate1};
+  padding: ${spacing.small};
+  padding-right: ${spacing.xsmall};
+  gap: ${spacing.medium};
+  ${mq.range({ from: breakpoints.tablet })} {
+    gap: ${spacing.large};
+    padding: ${spacing.small} ${spacing.normal} ${spacing.small} ${spacing.medium};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    gap: ${spacingUnit * 3};
+  }
+  display: flex;
+  align-items: center;
+  > div:first-of-type {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &:empty {
+    display: none;
+  }
+  border-radius: ${misc.borderRadius};
+  @keyframes snackbar-animations-in {
+    0% {
+      opacity: 0;
+      transform: translateY(${spacing.medium});
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes snackbar-animations-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(${spacing.medium});
+    }
+  }
+  animation: ${(props) => (props.expired ? 'snackbar-animations-out' : 'snackbar-animations-in')} 200ms ease-in-out;
+  animation-fill-mode: forwards;
+  ${fonts.sizes('18px')};
+  font-family: ${fonts.sans};
+`;
+
+export interface SnackBarItem {
+  children?: ReactElement;
+  snackbarItemId?: string;
+}
+
+interface SnackBarProps extends SnackBarItem {
+  id: string;
+  onKill?: (id: string | undefined) => void;
+  actionButtons?: {
+    text: string;
+    onClick: () => void;
+    ariaLabel: string;
+  }[];
+}
+
+const SnackBar = ({ onKill, children, snackbarItemId, id, actionButtons }: SnackBarProps) => {
+  const { t } = useTranslation();
+  const [expired, setExpired] = useState(false);
+  const timeoutId = useRef<null | ReturnType<typeof setTimeout>>();
+  useEffect(() => {
+    if (timeoutId.current) {
+      timeoutId && clearTimeout(timeoutId.current);
+    }
+    timeoutId.current = setTimeout(() => {
+      setExpired(true);
+    }, 8000);
+
+    return () => {
+      timeoutId.current && clearTimeout(timeoutId.current);
+    };
+  }, [snackbarItemId, timeoutId]);
+  return (
+    <Wrapper>
+      <StyledNotification
+        id={id}
+        aria-live="polite"
+        expired={expired || !children}
+        onAnimationEnd={() => expired && onKill && onKill(snackbarItemId)}>
+        {children && (
+          <>
+            <div>{children}</div>
+            <WrapperForButtons>
+              {actionButtons &&
+                actionButtons.map(({ onClick, text, ariaLabel }) => (
+                  <StyledActionButton key={text} link aria-label={ariaLabel} onClick={onClick}>
+                    {text}
+                  </StyledActionButton>
+                ))}
+              <StyledIconButton aria-label={t('snackbar.close')} size="xsmall" outline onClick={() => setExpired(true)}>
+                <Cross />
+              </StyledIconButton>
+            </WrapperForButtons>
+          </>
+        )}
+      </StyledNotification>
+    </Wrapper>
+  );
+};
+
+export default SnackBar;

package/src/SnackBar/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 SnackBar from './SnackBar';
+
+export type { SnackBarItem } from './SnackBar';
+
+export { SnackBar };

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 };