@ndla/ui 16.1.1 → 18.0.0

package/src/Messages/MessageBox.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
+import { WithTranslation, withTranslation } from 'react-i18next';
+
+// @ts-ignore
+import { Remarkable } from 'remarkable';
+import { CloseButton } from '@ndla/button';
+import { css } from '@emotion/core';
+
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+type MessageBoxType = 'ghost' | 'danger';
+
+interface StyledProps {
+  type?: MessageBoxType;
+}
+
+const MessageBoxWrapper = styled.div<StyledProps>`
+  display: flex;
+  padding: ${spacing.small};
+  font-family: ${fonts.sans};
+  border-radius: 5px;
+  background: ${colors.support.yellowLight};
+  color: ${colors.brand.greyDark};
+
+  ${fonts.sizes('18px')};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    ${fonts.sizes('16px')};
+  }
+
+  ${({ type }) =>
+    type === 'ghost' &&
+    css`
+      background: transparent;
+      border: 1px solid ${colors.brand.neutral7};
+      color: ${colors.brand.greyDark};
+    `}
+
+  ${({ type }) =>
+    type === 'danger' &&
+    css`
+      background: ${colors.support.redLightest};
+      color: ${colors.support.red};
+    `}
+`;
+
+const InfoWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  padding: ${spacing.small};
+  padding-right: 0;
+`;
+
+const TextWrapper = styled.div`
+  & p {
+    margin: 0;
+  }
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  padding-right: ${spacing.small};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const LinkWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${spacing.normal};
+  padding-top: ${spacing.nsmall};
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  color: ${colors.brand.primary};
+  gap: ${spacing.xxsmall};
+  font-weight: ${fonts.weight.semibold};
+`;
+
+const StyledClosebutton = styled(CloseButton)`
+  padding: 0;
+`;
+
+interface LinkProps {
+  href?: string;
+  text?: string;
+}
+
+interface Props {
+  type?: MessageBoxType;
+  children?: string;
+  links?: LinkProps[];
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+const Icon = ({ type }: StyledProps) => {
+  if (type === 'ghost') {
+    return <HumanMaleBoard />;
+  }
+  if (type === 'danger') {
+    return <WarningOutline />;
+  }
+  return <InformationOutline />;
+};
+
+export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props & WithTranslation) => {
+  return (
+    <MessageBoxWrapper type={type}>
+      <InfoWrapper>
+        <IconWrapper>
+          <Icon type={type} />
+        </IconWrapper>
+        <div>
+          <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+          {links && (
+            <LinkWrapper>
+              {links.map((x) => (
+                <Link href={x.href}>
+                  <span>{x.text}</span>
+                  <Forward />
+                </Link>
+              ))}
+            </LinkWrapper>
+          )}
+        </div>
+      </InfoWrapper>
+      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+    </MessageBoxWrapper>
+  );
+};
+
+export default withTranslation()(MessageBox);

package/src/{MessageBox → Messages}/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import MessageBox from './MessageBox';
 import MessageBoxTag from './MessageBoxTag';
-import { MessageBoxType } from './MessageBox';
+import MessageBox from './MessageBox';
+import MessageBanner from './MessageBanner';
 
-export { MessageBox, MessageBoxTag, MessageBoxType };
+export { MessageBox, MessageBoxTag, MessageBanner };

package/src/MyNdla/Resource/Folder.tsx

@@ -59,7 +59,7 @@ const FolderWrapper = styled(SafeLink)`
   display: flex;
   align-items: center;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   box-shadow: none;
   text-decoration: none;

package/src/MyNdla/index.ts

@@ -1,4 +1,3 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-import { VerticalNavigation } from './Navigation';
-export { VerticalNavigation, Folder, FolderInput };
+export { Folder, FolderInput };

package/src/Notion/ConceptNotion.tsx

@@ -16,7 +16,8 @@ import { getLicenseCredits } from '@ndla/licenses';
 import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
 import { Notion as UINotion } from '.';
 import { NotionImage } from './NotionImage';
-import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElement';
+import NotionVisualElement from './NotionVisualElement';
+import type { NotionVisualElementType } from './NotionVisualElement';
 import FigureNotion from './FigureNotion';
 import { Copyright } from '../types';
 import { FigureType } from '../Figure';

package/src/Notion/index.ts

@@ -1,2 +1,5 @@
-export { default as Notion } from './Notion';
 export { default as ConceptNotion } from './ConceptNotion';
+export { default as Notion } from './Notion';
+export { default as NotionVisualElement } from './NotionVisualElement';
+export type { NotionVisualElementType } from './NotionVisualElement';
+export type { ConceptNotionType } from './ConceptNotion';

package/src/Programme/Programme.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
 import ProgrammeSubjects from './ProgrammeSubjects';
 import { GradesProps } from './ProgrammeSubjects';
-import MessageBox from '../MessageBox/MessageBox';
+import MessageBox from '../Messages/MessageBox';
 import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`
   display: flex;

package/src/Programme/ProgrammeSubjects.tsx

@@ -12,7 +12,7 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, mq } from '@ndla/core';
 import { NavigationBox } from '../Navigation';
-import { MessageBox } from '../MessageBox';
+import { MessageBox } from '../Messages';
 
 const GradesMenu = styled.div`
   margin-bottom: 28px;

package/src/Resource/ListResource.tsx

@@ -47,7 +47,7 @@ const ResourceWrapper = styled(SafeLink)`
   text-decoration: none;
   box-shadow: none;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
   gap: 0 ${spacing.small};

package/src/TagSelector/SuggestionInput.tsx

@@ -19,6 +19,39 @@ import { uuid } from '@ndla/util';
 import Suggestions from './Suggestions';
 import type { TagType } from './TagSelector';
 
+const SuggestionTextWrapper = styled.div`
+  ${fonts.sizes(18)};
+  position: absolute;
+  display: flex;
+  flex-grow: 1;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  max-height: ${spacing.large};
+  padding: 8.333px;
+  padding-right: ${spacing.large};
+  span {
+    color: ${colors.brand.grey};
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    &:first-of-type {
+      color: transparent;
+    }
+  }
+`;
+
+const SuggestionText = ({ value, suggestionValue }: { value: string; suggestionValue: string }) => (
+  <SuggestionTextWrapper>
+    {!!value && (
+      <>
+        <span>{value}</span>
+        <span>{suggestionValue.substring(value.length)}</span>
+      </>
+    )}
+  </SuggestionTextWrapper>
+);
+
 const Cross = styled(CrossRaw)`
   margin-left: ${spacing.xxsmall};
 `;
@@ -31,15 +64,18 @@ const StyledInput = styled.input`
   flex-grow: 1;
   border: 0;
   outline: none;
-  background: transparent;
   ${fonts.sizes(18)};
+  z-index: 1;
+  position: relative;
+  background: transparent;
 `;
+
 const StyledInputWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: ${spacing.xsmall};
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.greyLighter};
+  border: 1px solid ${colors.brand.neutral7};
   transition: border-color ${animations.durations.normal} ease;
   border-radius: ${misc.borderRadius};
   &:focus-within {
@@ -50,6 +86,12 @@ const StyledInputWrapper = styled.div`
 const CombinedInputAndDropdownWrapper = styled.div`
   display: flex;
   flex-grow: 1;
+  position: relative;
+`;
+
+const StyledTagButton = styled(Button)<{ enableTagButtonAnimation: boolean }>`
+  ${({ enableTagButtonAnimation }) =>
+    enableTagButtonAnimation ? animations.fadeInScaled(animations.durations.slow) : ''}
 `;
 
 interface SuggestionInputProps {
@@ -90,6 +132,7 @@ const SuggestionInput = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const suggestionIdRef = useRef<string>(uuid());
+  const initalTags = useRef<string[]>(addedTags.map(({ id }) => id));
 
   useEffect(() => {
     setCurrentHighlightedIndex(0);
@@ -122,7 +165,8 @@ const SuggestionInput = ({
     <SuggestionInputContainer ref={containerRef}>
       <StyledInputWrapper>
         {addedTags.map(({ id, name }) => (
-          <Button
+          <StyledTagButton
+            enableTagButtonAnimation={!initalTags.current.includes(id)}
             aria-label={t('tagSelector.removeTag', { name })}
             onClick={() => onToggleTag(id)}
             light
@@ -132,9 +176,12 @@ const SuggestionInput = ({
             {prefix}
             {name}
             <Cross />
-          </Button>
+          </StyledTagButton>
         ))}
         <CombinedInputAndDropdownWrapper>
+          {suggestions[currentHighlightedIndex] && (
+            <SuggestionText value={value} suggestionValue={suggestions[currentHighlightedIndex].name} />
+          )}
           <StyledInput
             placeholder={t('tagSelector.placeholder')}
             value={value}
@@ -157,38 +204,57 @@ const SuggestionInput = ({
             }}
             ref={inputRef}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              if (!['Enter', ' ', 'Tab', 'ArrowDown', 'ArrowUp', 'Backspace'].includes(e.key)) {
+                return;
+              }
+              const trimmedValue = value.replace(/\s/g, '');
               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') {
+                return;
+              }
+              if (e.key === 'Backspace' && trimmedValue === '' && addedTags.length) {
+                // Remove the added last tag
+                onToggleTag(addedTags[addedTags.length - 1].id);
+                return;
+              }
+              if (e.key === 'ArrowUp') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex - 1 < 0 ? suggestions.length - 1 : currentHighlightedIndex - 1,
                 );
                 e.preventDefault();
-              } else if (e.key === 'ArrowDown') {
+                return;
+              }
+              if (e.key === 'ArrowDown') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex + 1 >= suggestions.length ? 0 : currentHighlightedIndex + 1,
                 );
                 e.preventDefault();
+                return;
+              }
+              if (trimmedValue === '' && !expanded) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                }
+                return;
+              }
+              if (e.key === 'Enter' || e.key === 'Tab' || e.key === ' ') {
+                if (suggestions.length > 0) {
+                  if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
+                    onToggleTag(suggestions[currentHighlightedIndex].id);
+                  } else if (trimmedValue.length < suggestions[currentHighlightedIndex].name.length) {
+                    onCreateTag(trimmedValue);
+                    e.preventDefault();
+                  }
+                  setInputValue('');
+                  e.preventDefault();
+                  return;
+                }
+                onCreateTag(trimmedValue);
+                setInputValue('');
+                e.preventDefault();
               }
+              return;
             }}
           />
           <Tooltip tooltip={expanded ? t('tagSelector.hideAllTags') : t('tagSelector.showAllTags')}>

package/src/TagSelector/Suggestions.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { Check } from '@ndla/icons/editor';
 import { spacing, colors, misc, animations, fonts, shadows } from '@ndla/core';
 import Button from '@ndla/button';
@@ -60,6 +61,7 @@ interface SuggestionButtonProps {
 const SuggestionButton = styled(Button)<SuggestionButtonProps>`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   ${fonts.sizes(18)};
   transition: ${misc.transition.default};
   font-weight: 400;
@@ -72,6 +74,18 @@ const SuggestionButton = styled(Button)<SuggestionButtonProps>`
       }
     }
   }
+  ${({ isHighlighted }) =>
+    isHighlighted
+      ? css`
+          background: ${colors.brand.lighter};
+          &:disabled {
+            background: ${colors.brand.greyLighter};
+            svg {
+              fill: ${colors.brand.grey};
+            }
+          }
+        `
+      : ''}
 `;
 
 interface Props {

package/src/TagSelector/TagSelector.tsx

@@ -33,10 +33,12 @@ interface Props {
   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 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 getSuggestions = (tags: TagType[], inputValue: string): TagType[] => {
   if (inputValue === '') {

package/src/Topic/Topic.tsx

@@ -21,7 +21,7 @@ import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
-import { MessageBox, MessageBoxType } from '../MessageBox';
+import { MessageBox } from '../Messages';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -331,7 +331,7 @@ const Topic = ({
                   </StyledAdditionalResource>
                 )}
               </TopicHeading>
-              {messageBox && <MessageBox type={MessageBoxType.medium}>{messageBox}</MessageBox>}
+              {messageBox && <MessageBox>{messageBox}</MessageBox>}
               <TopicIntroduction invertedStyle={invertedStyle}>
                 {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
               </TopicIntroduction>

package/src/TopicMenu/TopicMenu.jsx

@@ -28,7 +28,7 @@ import Logo from '../Logo';
 import FrontpageAllSubjects from '../Frontpage/FrontpageAllSubjects';
 import NavigationBox from '../Navigation/NavigationBox';
 import { ProgrammeSubjects } from '../Programme';
-import { MessageBox, MessageBoxType } from '../MessageBox';
+import { MessageBanner } from '../Messages';
 
 const classes = new BEMHelper({
   name: 'topic-menu',
@@ -153,7 +153,7 @@ export const TopicMenu = ({
   return (
     <nav>
       {messages?.map((message) => (
-        <MessageBox type={MessageBoxType.masthead}>{message}</MessageBox>
+        <MessageBanner>{message}</MessageBanner>
       ))}
       <ModalHeader modifier={['white', 'menu']}>
         <div {...classes('masthead-left')}>

package/src/TreeStructure/FolderItem.tsx

@@ -11,7 +11,7 @@ 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';
+import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -37,6 +37,17 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
+const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+  position: absolute;
+  right: ${spacing.xsmall};
+  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  &:hover,
+  &:focus,
+  &:focus-within {
+    opacity: 1;
+  }
+`;
+
 const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
@@ -45,6 +56,9 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   &:focus {
     background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
+    + ${WrapperForFolderChild} {
+      opacity: 1;
+    }
   }
   transition: ${animations.durations.superFast};
   border: 0;
@@ -58,6 +72,7 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
   flex-grow: 1;
   box-shadow: none;
+  text-align: left;
 `;
 
 const FolderNameLink = FolderName.withComponent('a');
@@ -77,6 +92,7 @@ interface Props {
   url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
+  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
@@ -94,6 +110,7 @@ const FolderItem = ({
   icon,
   url,
   noPaddingWhenArrowIsHidden,
+  folderChild,
 }: Props) => {
   const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
   const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -134,24 +151,31 @@ const FolderItem = ({
           {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>
+        <>
+          <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>
+          {folderChild && (
+            <WrapperForFolderChild marked={marked}>
+              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+            </WrapperForFolderChild>
+          )}
+        </>
       )}
     </FolderItemWrapper>
   );

package/src/TreeStructure/FolderItems.tsx

@@ -48,6 +48,7 @@ const FolderItems = ({
   focusedFolderId,
   setFocusedFolderId,
   firstLevel,
+  folderChild,
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={firstLevel}>
     {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
@@ -71,6 +72,7 @@ const FolderItems = ({
               hideArrow={dataChildren?.length === 0 || newIdPaths.length >= MAX_LEVEL_FOR_FOLDERS}
               noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
+              folderChild={folderChild}
             />
           </div>
           {newFolder?.parentId === id && (
@@ -98,6 +100,7 @@ const FolderItems = ({
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
               firstLevel={false}
+              folderChild={folderChild}
             />
           )}
         </StyledLI>

package/src/TreeStructure/TreeStructure.tsx

@@ -40,6 +40,7 @@ const TreeStructure = ({
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
+  folderChild,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
   const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
@@ -152,6 +153,7 @@ const TreeStructure = ({
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
           firstLevel
+          folderChild={folderChild}
         />
       </TreeStructureStyledWrapper>
       {editable && (