@ndla/ui 46.1.0 → 47.1.0

package/src/LicenseByline/EmbedByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useMemo } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -17,14 +17,13 @@ import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
 import { IDraftCopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
 import { WarningOutline } from '@ndla/icons/common';
-import { parseMarkdown } from '@ndla/util';
 import LicenseLink from './LicenseLink';
 import LicenseDescription from './LicenseDescription';
 
 interface BaseProps {
   topRounded?: boolean;
   bottomRounded?: boolean;
-  description?: string;
+  description?: ReactNode;
   children?: ReactNode;
   visibleAlt?: string;
   error?: true | false;
@@ -132,7 +131,7 @@ const EmbedByline = ({
   type,
   topRounded,
   bottomRounded,
-  description: descriptionProp,
+  description,
   children,
   visibleAlt,
   first = true,
@@ -140,12 +139,6 @@ const EmbedByline = ({
   ...props
 }: Props) => {
   const { t, i18n } = useTranslation();
-  const strippedDescription = descriptionProp?.trim();
-
-  const description = useMemo(() => {
-    const stripped = strippedDescription?.trim() ?? '';
-    return parseMarkdown(stripped, 'caption');
-  }, [strippedDescription]);
 
   if (props.error) {
     const typeString = type === 'h5p' ? 'H5P' : t(`embed.type.${type}`).toLowerCase();
@@ -164,7 +157,7 @@ const EmbedByline = ({
 
   return (
     <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-first={first}>
-      {!!strippedDescription?.length && description && <LicenseDescription description={description} />}
+      {description && <LicenseDescription description={description} />}
       {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
       <RightsWrapper data-grid={inGrid}>
         {license ? <LicenseLink license={license} asLink={!!license.url.length} /> : null}

package/src/Messages/MessageBanner.tsx

@@ -8,9 +8,8 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
-// @ts-ignore
-import { Remarkable } from 'remarkable';
 import { CloseButton } from '@ndla/button';
+import { ReactNode } from 'react';
 
 interface WrapperProps {
   small?: boolean;
@@ -44,19 +43,15 @@ const StyledClosebutton = styled(CloseButton)`
 
 interface Props {
   small?: boolean;
-  children?: string;
+  children?: ReactNode;
   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) }} />
+      <TextWrapper>{children}</TextWrapper>
       {showCloseButton && <StyledClosebutton onClick={onClose} />}
     </MessageBannerWrapper>
   );

package/src/Messages/MessageBox.tsx

@@ -10,14 +10,9 @@ import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
 
-// @ts-ignore
-import { Remarkable } from 'remarkable';
 import { CloseButton } from '@ndla/button';
 import { css } from '@emotion/react';
-
-const markdown = new Remarkable({ breaks: true });
-markdown.inline.ruler.enable(['sub', 'sup']);
-markdown.block.ruler.disable(['list', 'table']);
+import { ReactNode } from 'react';
 
 type MessageBoxType = 'ghost' | 'danger';
 
@@ -109,7 +104,7 @@ interface LinkProps {
 
 interface Props {
   type?: MessageBoxType;
-  children?: string;
+  children?: ReactNode;
   links?: LinkProps[];
   showCloseButton?: boolean;
   onClose?: () => void;
@@ -133,7 +128,7 @@ export const MessageBox = ({ type, children = '', links, showCloseButton, onClos
           <Icon type={type} />
         </IconWrapper>
         <div>
-          <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+          <TextWrapper>{children}</TextWrapper>
           {links && (
             <LinkWrapper>
               {links.map((x) => (

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { css } from '@emotion/react';
@@ -105,13 +104,12 @@ const StyledContentWrapper = styled.div<InvertItProps>`
 
 type Props = {
   heading: string;
-  introduction: string;
+  introduction: ReactNode;
   onToggleShowContent: () => void;
   showContent: boolean;
   isLoading: boolean;
   isAdditionalTopic?: boolean;
   invertedStyle?: boolean;
-  renderMarkdown: (text: string) => string;
   children: ReactNode;
 };
 
@@ -123,7 +121,6 @@ export const NavigationTopicAbout = ({
   isLoading,
   isAdditionalTopic,
   invertedStyle,
-  renderMarkdown,
   children,
 }: Props) => {
   const { t } = useTranslation();
@@ -143,7 +140,7 @@ export const NavigationTopicAbout = ({
       ) : (
         <>
           <StyledIngress invertedStyle={invertedStyle}>
-            {parse(renderMarkdown(introduction))}
+            {introduction}
             <StyledButtonWrapper invertedStyle={invertedStyle}>
               <ButtonV2
                 aria-expanded={!!showContent}

package/src/Notion/Notion.tsx

@@ -8,7 +8,6 @@
 import { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import { parseMarkdown } from '@ndla/util';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const ContentWrapper = styled.div`
@@ -83,7 +82,8 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
         {imageElement}
         {visualElement}
         <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
-          {parseMarkdown(`**${title.trim()}** \u2013 ${text}`, 'body')}
+          <b>{title.trim()}</b>
+          {text}
           {!!labels.length && (
             <LabelsContainer>
               {t('searchPage.resultType.notionLabels')}

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -109,17 +109,17 @@ const SearchFieldHeader = ({
       {value && (
         <ClearButton
           type="button"
-          value={t<string>('welcomePage.resetSearch')}
+          value={t('welcomePage.resetSearch')}
           onClick={() => {
             onChange('');
             inputRef.current?.focus();
           }}
         >
-          <CrossIcon style={iconStyle} title={t<string>('welcomePage.resetSearch')} />
+          <CrossIcon style={iconStyle} title={t('welcomePage.resetSearch')} />
         </ClearButton>
       )}
-      <SearchButton type="submit" value={t<string>('searchPage.search')}>
-        <SearchIcon style={iconStyle} title={t<string>('searchPage.search')} />
+      <SearchButton type="submit" value={t('searchPage.search')}>
+        <SearchIcon style={iconStyle} title={t('searchPage.search')} />
       </SearchButton>
     </StyledForm>
   );

package/src/TagSelector/ariaMessages.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import { TFunction } from 'react-i18next';
 import {
   AriaGuidanceProps,
   AriaOnChangeProps,
@@ -15,6 +14,7 @@ import {
   GroupBase,
   OptionsOrGroups,
 } from 'react-select';
+import { TFunction } from 'i18next';
 import { TagType } from './types';
 
 export const createAriaMessages = (t: TFunction) => ({

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -7,27 +7,11 @@
  */
 
 import { MouseEvent } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, fonts, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 
-const Introduction = styled.p`
-  max-width: 800px;
-  font-weight: ${fonts.weight.light};
-  ${fonts.sizes('18px', '28px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('22px', '32px')};
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('26px', '36px')};
-  }
-`;
-
 interface Props {
   id?: string;
   title: string;
@@ -40,10 +24,10 @@ const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, id }: Props)
   const { t } = useTranslation();
   return (
     <>
-      <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
+      <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1}>
         {title}
       </Heading>
-      <Introduction>{introduction}</Introduction>
+      <Text textStyle="ingress">{introduction}</Text>
       <NavigationBox
         items={topics}
         listDirection="floating"

package/src/Topic/Topic.tsx

@@ -8,9 +8,9 @@
 
 import { ReactNode, MouseEvent, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { animations, breakpoints, colors, mq, spacing } from '@ndla/core';
+import { Text, Heading } from '@ndla/typography';
 
-import parse from 'html-react-parser';
 import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
 import { ModalCloseButton, ModalContent, Modal, ModalHeader, ModalTrigger } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
@@ -18,7 +18,6 @@ import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import { EmbedMetaData } from '@ndla/types-embed';
-import { Heading } from '@ndla/typography';
 import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
@@ -145,14 +144,6 @@ const HeadingWrapper = styled.hgroup`
   }
 `;
 
-const TopicIntroduction = styled.div`
-  font-weight: ${fonts.weight.light};
-  max-width: 612px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('22px', '32px')};
-  }
-`;
-
 const StyledButtonWrapper = styled.div<InvertItProps>`
   margin-top: ${spacing.small};
   padding: ${spacing.xsmall} 0 ${spacing.xsmall} ${spacing.medium};
@@ -197,13 +188,12 @@ export type TopicProps = {
     alt: string;
   };
   title: string;
-  introduction: string;
+  introduction: ReactNode;
   resources?: ReactNode;
   visualElementEmbedMeta?: EmbedMetaData;
   subTopics?: ItemProps[] | null | undefined;
   onSubTopicSelected?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   isLoading?: boolean;
-  renderMarkdown?: (text: string) => string;
   invertedStyle?: boolean;
   onToggleShowContent?: () => void;
   showContent?: boolean;
@@ -229,7 +219,6 @@ const Topic = ({
   subTopics,
   onSubTopicSelected,
   isLoading,
-  renderMarkdown,
   invertedStyle,
   onToggleShowContent,
   showContent,
@@ -284,7 +273,9 @@ const Topic = ({
               </>
             )}
           </HeadingWrapper>
-          <TopicIntroduction>{renderMarkdown ? parse(renderMarkdown(introduction)) : introduction}</TopicIntroduction>
+          <Text textStyle="ingress" element="div">
+            {introduction}
+          </Text>
         </div>
         {metaImage && (
           <TopicHeaderVisualElementWrapper>

package/src/locale/messages-en.ts

@@ -1271,6 +1271,19 @@ const messages = {
         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.',
       },
     },
+    myProfile: {
+      title: 'My Profile',
+      disclaimerTitle: 'Where is my picture and name used?',
+      disclaimerText: 'Your picture and name are displayed when you participate in discussions in the arena.',
+      preferenceTitle: 'Choose whether you want to display name when sharing a folder',
+      preferenceText:
+        'Here you can choose whether you want to display your name when you share a folder. The selected option applies to all your folders and can be changed later. If you later change the option, your name will appear on all your shared folders.',
+      editButtonText: 'Change profile picture',
+      radioButtonText: {
+        option1: 'Show my name when I share a folder',
+        option2: 'Do not show my name when I share a folder',
+      },
+    },
     resource: {
       add: 'Add folder/tag',
       remove: 'Remove',

package/src/locale/messages-nb.ts

@@ -1267,6 +1267,19 @@ const messages = {
         text: 'Når du lagrer en ressurs, får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt, ved å velge <strong>Mine emneknagger</strong> i venstremenyen. Her kan du også se hvilke ressurser du har markert med hvilken emneknagg.',
       },
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Hvor brukes bildet og navnet mitt?',
+      disclaimerText: 'Bilde og navn vises når du deltar i diskusjoner i arenaen.',
+      preferenceTitle: 'Velg om du vil vise navn når du deler en mappe',
+      preferenceText:
+        'Her kan du selv velge om du vil vise navnet ditt når du deler en mappe. Valget gjelder for alle mappene dine og kan endres senere. Dersom du endrer vil navnet ditt vises på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilde',
+      radioButtonText: {
+        option1: 'Vis navnet mitt når jeg deler en mappe',
+        option2: 'Ikke vis navnet mitt når jeg deler mappe',
+      },
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/src/locale/messages-nn.ts

@@ -1267,6 +1267,19 @@ const messages = {
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.',
       },
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Kvar blir biletet og namnet mitt brukt?',
+      disclaimerText: 'Bilete og namn vert vist når du deltek i diskusjonar i arenaen.',
+      preferenceTitle: 'Vel om du vil vise namn når du deler ei mappe',
+      preferenceText:
+        'Her kan du sjølv velje om du vil vise namnet ditt når du deler ei mappe. Valet gjeld for alle mappene dine og kan endrast seinare. Dersom du endrar vil namnet ditt visast på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilete',
+      radioButtonText: {
+        option1: 'Vis namnet mitt når eg deler ei mappe',
+        option2: 'Ikkje vis namnet mitt når eg deler mappe',
+      },
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/src/locale/messages-se.ts

@@ -1267,6 +1267,19 @@ const messages = {
         text: 'Go vurket muhtin resurssa de lea vejolaš merket resurssa fáddágilkoriin. Fáddágilkor lea čoavddasátni man sáhtát geavahit gávdnan dihte ruovttoluotta resurssaide máhpaid rastá. Gávnnat buot fáddágilkoriid maid leat geavahan go válljet mu fáddágilkoriid gurut bealde fálus. Das oainnát maiddái maid resurssaid don leat merken juohke fáddágilkoriin.',
       },
     },
+    myProfile: {
+      title: 'Mu profiila',
+      disclaimerTitle: 'Gos geavahit mu gova ja mu nama?',
+      disclaimerText: 'Govva ja namma čájehuvvojit go searvat digaštallamii arenain.',
+      preferenceTitle: 'Vállje jos namma čájehuvvo máhpa juohkkedettiin',
+      preferenceText:
+        'Dás válljet jos iežat namma čájehuvvo juohkkedettiin máhpa. Dát molssaeaktu guoská buot máhpaide ja sáhttá rievdaduvvot maŋŋil. Jos rievdadat dán, de čájehuvvo du namma buot juogaduvvon máhpain.',
+      editButtonText: 'Rievdat profiilagova',
+      radioButtonText: {
+        option1: 'Čájet mu nama máhpa juohkkedettiin',
+        option2: 'Ale čájet mu nama máhpa juohkkedettiin',
+      },
+    },
     resource: {
       add: 'Lasit máhpa/fáddágilkora',
       remove: 'Sihko',

package/src/locale/messages-sma.ts

@@ -1272,6 +1272,19 @@ const messages = {
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.',
       },
     },
+    myProfile: {
+      title: 'Mov Profijle',
+      disclaimerTitle: 'Gusnie guvvie jïh nomme åtnasuvvieh?',
+      disclaimerText: 'Guvvie jïh nomme våajnoes sjidtieh gosse meatan digkiedimmesne sijjesne.',
+      preferenceTitle: 'Sjïehtedh jis edtja nommem vuesiehtidh gosse maabpam juekedh',
+      preferenceText:
+        'Daesnie jïjtje veeljh mejtie sïjhth dov nommem vuesiehtidh gosse maabpam juekedh . Daate veeljeme lea gaajhkine dov maabpojne, jïh maahta dam mænngan jarkelidh. Jis jeatjahdahtah , dov nomme sæjhta våajnoes årrodh gaajhkine dov joekedamme maabpojne.',
+      editButtonText: 'Naemhtie profijleguvviem jarkelidh',
+      radioButtonText: {
+        option1: 'Vuesehth mov nommem gosse maabpam juekieh',
+        option2: 'Aellieh mov nommem vuesehth gosse maabpam juekieh',
+      },
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/src/types.ts

@@ -68,7 +68,7 @@ export interface FootNote {
 
 export interface Article {
   title: string;
-  introduction: string;
+  introduction: ReactNode;
   content: ReactNode;
   footNotes: Array<FootNote>;
   copyright?: Copyright;