@ndla/ui 16.2.0 → 18.0.1

package/src/Masthead/Masthead.tsx

@@ -10,7 +10,7 @@ import React, { ReactNode, useEffect, useRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { DisplayOnPageYOffset } from '../Animation';
-import { MessageBox, MessageBoxType } from '../MessageBox';
+import { MessageBanner } from '../Messages';
 
 const classes = new BEMHelper({
   name: 'masthead',
@@ -95,12 +95,9 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBox
-            type={MessageBoxType.masthead}
-            showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
-          </MessageBox>
+          </MessageBanner>
         ))}
         {infoContent && (
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>

package/src/Masthead/MastheadAuthModal.tsx

@@ -10,6 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
+import { colors, fonts, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 
 import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
@@ -18,7 +20,12 @@ type FeideWrapperProps = {
 };
 
 const StyledButton = styled(Button)<FeideWrapperProps>`
+  font-weight: ${fonts.weight.semibold};
+  display: flex;
+  align-items: center;
   .feide-icon svg {
+    margin-left: ${spacing.xsmall};
+    fill: ${colors.brand.primary};
     color: ${(props) => (props.inverted ? `#ffffff` : `#000000`)};
     width: 22px;
     height: 22px;
@@ -35,11 +42,13 @@ interface Props extends AuthModalProps {
 }
 
 const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
+  const { t } = useTranslation();
   return (
     <AuthModal
       {...rest}
       activateButton={
         <StyledButton inverted={inverted} ghostPill={!inverted} ghostPillInverted={inverted} aria-label="Feide">
+          {t('myNdla.myNDLA')}
           <span className="feide-icon">
             <Feide />
           </span>

package/src/Messages/MessageBanner.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 { colors, spacing } from '@ndla/core';
+// @ts-ignore
+import { Remarkable } from 'remarkable';
+import { CloseButton } from '@ndla/button';
+
+interface WrapperProps {
+  small?: boolean;
+}
+
+const MessageBannerWrapper = styled.div<WrapperProps>`
+  display: grid;
+  grid-template-areas: '. content closebutton';
+  grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr);
+  padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
+  background: ${colors.support.yellowLight};
+  color: ${colors.brand.greyDark};
+  border: none;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  grid-area: content;
+  align-items: center;
+  & p {
+    margin: 0;
+  }
+`;
+
+const StyledClosebutton = styled(CloseButton)`
+  grid-area: closebutton;
+  padding: 0;
+  justify-self: flex-end;
+  align-self: flex-start;
+`;
+
+interface Props {
+  small?: boolean;
+  children?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
+  return (
+    <MessageBannerWrapper small={small}>
+      <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+    </MessageBannerWrapper>
+  );
+};
+
+export default MessageBanner;

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;
@@ -124,7 +124,7 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
   return (
     <IconCountWrapper type={layoutType}>
       <Icon aria-label={t(`myNdla.${type}s`)} />
-      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count: 3 })}</span>
+      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count })}</span>
     </IconCountWrapper>
   );
 };

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/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/Resource/resourceComponents.tsx

@@ -48,6 +48,9 @@ const StyledTagListElement = styled.li`
   ::before {
     content: '#';
   }
+  &:hover {
+    color: ${colors.brand.primary};
+  }
 `;
 
 const StyledTopicList = styled.ul`

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

@@ -42,7 +42,8 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   right: ${spacing.xsmall};
   opacity: ${({ marked }) => (marked ? 1 : 0.25)};
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     opacity: 1;
   }
 `;
@@ -170,7 +171,9 @@ const FolderItem = ({
             {name}
           </FolderName>
           {folderChild && (
-            <WrapperForFolderChild marked={marked}>{folderChild(id, marked ? 0 : -1)}</WrapperForFolderChild>
+            <WrapperForFolderChild marked={marked}>
+              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+            </WrapperForFolderChild>
           )}
         </>
       )}

package/src/TreeStructure/FolderItems.tsx

@@ -53,7 +53,7 @@ const FolderItems = ({
   <StyledUL role="group" firstLevel={firstLevel}>
     {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
       const newIdPaths = [...idPaths, _index];
-      const isOpen = openFolders?.has(id);
+      const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>