@ndla/ui 30.2.0 → 30.2.1

package/src/Subject/SubjectCarousel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { Carousel, CarouselAutosize } from '@ndla/carousel';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
 import { SafeLinkProps } from '@ndla/safelink';
 import { ContentCard } from '../index';
@@ -59,99 +59,96 @@ const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
   }
 `;
 
-const SubjectCarousel = ({
-  subjects = [],
-  title = '',
-  narrowScreen = false,
-  wideScreen = false,
-  t,
-}: Props & WithTranslation) => (
-  <StyledSection narrowScreen={narrowScreen} wideScreen={wideScreen}>
-    <CarouselAutosize
-      breakpoints={[
-        {
-          until: 'mobile',
-          columnsPrSlide: 1,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-        },
-        {
-          until: 'mobileWide',
-          columnsPrSlide: 2,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-        },
-        {
-          until: 'tablet',
-          columnsPrSlide: 2.25,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit,
-        },
-        {
-          until: 'tabletWide',
-          columnsPrSlide: 3.25,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit * 1.25,
-        },
-        {
-          until: 'desktop',
-          columnsPrSlide: 4.25,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit * 1.25,
-        },
-        {
-          until: 'wide',
-          columnsPrSlide: 4,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit * 2.5,
-        },
-        {
-          until: 'ultraWide',
-          columnsPrSlide: 5,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit * 2.5,
-        },
-        {
-          columnsPrSlide: 7,
-          distanceBetweenItems: 26,
-          arrowOffset: 26,
-          margin: spacingUnit * 2.5,
-          maxColumnWidth: 200,
-        },
-      ]}
-      centered
-      itemsLength={subjects?.length ?? 0}>
-      {(autoSizedProps) => (
-        <>
-          <StyledSubjectSectionTitle>{title}</StyledSubjectSectionTitle>
-          <Carousel
-            {...autoSizedProps}
-            disableScroll={(autoSizedProps?.columnsPrSlide ?? 0) >= subjects.length}
-            slideBackwardsLabel={t('carousel.back')}
-            slideForwardsLabel={t('carousel.forward')}
-            buttonClass="c-carousel__arrow"
-            wrapperClass="c-carousel__wrapper"
-            columnWidth={autoSizedProps?.columnWidth ?? 0}
-            columnsPrSlide={autoSizedProps?.columnsPrSlide ?? 0}
-            items={subjects.map((subject) => (
-              <ContentCard
-                {...subject}
-                columnWidth={autoSizedProps?.columnWidth ?? 0}
-                type={subject.type ?? ''}
-                image={subject.image ?? ''}
-                key={subject.id}
-              />
-            ))}
-          />
-        </>
-      )}
-    </CarouselAutosize>
-  </StyledSection>
-);
+const SubjectCarousel = ({ subjects = [], title = '', narrowScreen = false, wideScreen = false }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledSection narrowScreen={narrowScreen} wideScreen={wideScreen}>
+      <CarouselAutosize
+        breakpoints={[
+          {
+            until: 'mobile',
+            columnsPrSlide: 1,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+          },
+          {
+            until: 'mobileWide',
+            columnsPrSlide: 2,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+          },
+          {
+            until: 'tablet',
+            columnsPrSlide: 2.25,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit,
+          },
+          {
+            until: 'tabletWide',
+            columnsPrSlide: 3.25,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit * 1.25,
+          },
+          {
+            until: 'desktop',
+            columnsPrSlide: 4.25,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit * 1.25,
+          },
+          {
+            until: 'wide',
+            columnsPrSlide: 4,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit * 2.5,
+          },
+          {
+            until: 'ultraWide',
+            columnsPrSlide: 5,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit * 2.5,
+          },
+          {
+            columnsPrSlide: 7,
+            distanceBetweenItems: 26,
+            arrowOffset: 26,
+            margin: spacingUnit * 2.5,
+            maxColumnWidth: 200,
+          },
+        ]}
+        centered
+        itemsLength={subjects?.length ?? 0}>
+        {(autoSizedProps) => (
+          <>
+            <StyledSubjectSectionTitle>{title}</StyledSubjectSectionTitle>
+            <Carousel
+              {...autoSizedProps}
+              disableScroll={(autoSizedProps?.columnsPrSlide ?? 0) >= subjects.length}
+              slideBackwardsLabel={t('carousel.back')}
+              slideForwardsLabel={t('carousel.forward')}
+              buttonClass="c-carousel__arrow"
+              wrapperClass="c-carousel__wrapper"
+              columnWidth={autoSizedProps?.columnWidth ?? 0}
+              columnsPrSlide={autoSizedProps?.columnsPrSlide ?? 0}
+              items={subjects.map((subject) => (
+                <ContentCard
+                  {...subject}
+                  columnWidth={autoSizedProps?.columnWidth ?? 0}
+                  type={subject.type ?? ''}
+                  image={subject.image ?? ''}
+                  key={subject.id}
+                />
+              ))}
+            />
+          </>
+        )}
+      </CarouselAutosize>
+    </StyledSection>
+  );
+};
 
-export default withTranslation()(SubjectCarousel);
+export default SubjectCarousel;

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -9,7 +9,7 @@
 import React, { MouseEvent } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq } from '@ndla/core';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 
@@ -46,18 +46,21 @@ type Props = {
   onSelectTopic?: (event: MouseEvent<HTMLElement>, id?: string) => void;
 };
 
-const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, t }: Props & WithTranslation) => (
-  <>
-    <Heading>{title}</Heading>
-    <Introduction>{introduction}</Introduction>
-    <NavigationBox
-      items={topics}
-      listDirection="floating"
-      heading={t('topicPage.topics')}
-      colorMode="greyLighter"
-      onClick={onSelectTopic}
-    />
-  </>
-);
-
-export default withTranslation()(ToolboxInfo);
+const ToolboxInfo = ({ title, introduction, topics, onSelectTopic }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Heading>{title}</Heading>
+      <Introduction>{introduction}</Introduction>
+      <NavigationBox
+        items={topics}
+        listDirection="floating"
+        heading={t('topicPage.topics')}
+        colorMode="greyLighter"
+        onClick={onSelectTopic}
+      />
+    </>
+  );
+};
+
+export default ToolboxInfo;

package/src/User/UserInfo.tsx

@@ -49,6 +49,16 @@ export const UserInfo = ({ user }: Props) => {
         <div data-hj-suppress>
           {t('user.mail')}: <b>{user.mail?.join(', ')}</b>
         </div>
+        {user.preferredLanguage && (
+          <div data-hj-suppress>
+            {t('user.preferredLanguage')}: <b>{t(`languages.${user.preferredLanguage}`)}</b>
+          </div>
+        )}
+        {user.mobile && (
+          <div data-hj-suppress>
+            {t('user.mobile')}: <b>{user.mobile}</b>
+          </div>
+        )}
       </ShortInfoDiv>
 
       {t('user.modal.collectedInfo')}
@@ -75,6 +85,18 @@ export const UserInfo = ({ user }: Props) => {
           </li>
         ))}
       </InfoList>
+      {parsedUser.grepCodes.length > 0 && (
+        <InfoList data-hj-suppress>
+          <li key="grepCodes">
+            {t('user.groupTypes.grepCode')}
+            <InfoList>
+              {parsedUser.grepCodes.map((code) => (
+                <li key={code.id}>{`${code.displayName} (${code.code})`}</li>
+              ))}
+            </InfoList>
+          </li>
+        </InfoList>
+      )}
     </div>
   );
 };

package/src/User/__tests__/parseUserObject-test.ts

@@ -165,6 +165,7 @@ describe('parseUserObject', () => {
       primaryAffiliation: 'employee',
       displayName: 'David LærerVGS Jonsen',
       mail: ['david_laerervgs@feide.no'],
+      grepCodes: [],
       organizations: [
         {
           id: 'fc:org:spusers.feide.no',

package/src/User/apiTypes.ts

@@ -25,7 +25,7 @@ export interface FeideMembershipType {
 
 interface FeideBaseGroup {
   id: string;
-  type: 'fc:org' | 'fc:gogroup';
+  type: 'fc:org' | 'fc:gogroup' | 'fc:grep';
   displayName: string;
   membership: FeideMembershipType;
 }
@@ -53,7 +53,14 @@ export interface FeideGoGroup extends FeideBaseGroup {
   };
 }
 
-export type FeideGroup = FeideOrg | FeideGoGroup;
+export interface FeideGrep extends FeideBaseGroup {
+  type: 'fc:grep';
+  code: string;
+  grep_type: 'aarstrinn' | 'fagkoder';
+  public: boolean;
+}
+
+export type FeideGroup = FeideOrg | FeideGoGroup | FeideGrep;
 
 export interface FeideUser {
   cn: string[];
@@ -66,6 +73,8 @@ export interface FeideUser {
   schacHomeOrganization?: string;
   sn: string[];
   uid: string[];
+  preferredLanguage?: string;
+  mobile?: string;
 }
 
 export interface FeideUserApiType extends FeideUser {

package/src/User/parseUserObject.ts

@@ -6,7 +6,7 @@
  */
 
 import { groupBy } from 'lodash';
-import { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
+import { FeideGoGroup, FeideGrep, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
 
 type GoGroupType = 'basic' | 'teaching' | 'other';
 
@@ -46,24 +46,29 @@ const createGroupings = (groups: FeideGoGroup[]) => {
  * @returns An object containing root groups mapped with children.
  */
 const parseOrgs = (groups: FeideGroup[]) => {
-  const [roots, children] = groups.reduce<[FeideOrg[], FeideGoGroup[]]>(
+  const [roots, children, grep] = groups.reduce<[FeideOrg[], FeideGoGroup[], FeideGrep[]]>(
     (acc, curr) => {
       if (curr.type === 'fc:org') {
-        return [acc[0].concat(curr), acc[1]];
+        return [acc[0].concat(curr), acc[1], acc[2]];
+      } else if (curr.type === 'fc:gogroup') {
+        return [acc[0], acc[1].concat(curr), acc[2]];
       } else {
-        return [acc[0], acc[1].concat(curr)];
+        return [acc[0], acc[1], acc[2].concat(curr)];
       }
     },
-    [[], []],
+    [[], [], []],
   );
 
   const childrenByParentId = groupBy(children, (c) => c.parent);
   const rootsWithChildren = roots.map((root) => ({ ...root, children: childrenByParentId[root.id] ?? [] }));
 
-  return rootsWithChildren.map((root) => ({
-    ...root,
-    children: createGroupings(root.children),
-  }));
+  return {
+    grepCodes: grep,
+    roots: rootsWithChildren.map((root) => ({
+      ...root,
+      children: createGroupings(root.children),
+    })),
+  };
 };
 
 /**
@@ -71,13 +76,14 @@ const parseOrgs = (groups: FeideGroup[]) => {
  * @returns A user object parsed in a presentable way to be handled by i.e UserInfo component.
  */
 export const parseUserObject = (user: FeideUserApiType) => {
-  const orgs = parseOrgs(user.groups);
+  const { roots, grepCodes } = parseOrgs(user.groups);
 
   return {
     uid: user.uid,
     primaryAffiliation: user.eduPersonPrimaryAffiliation,
     displayName: user.displayName,
     mail: user.mail,
-    organizations: orgs,
+    organizations: roots,
+    grepCodes,
   };
 };

package/src/locale/messages-en.ts

@@ -1016,10 +1016,13 @@ const messages = {
     name: 'Name',
     mail: 'E-mail',
     username: 'Username',
+    mobile: 'Phone number',
+    preferredLanguage: 'Foretrukket språk',
     groupTypes: {
       basic: 'Basic group',
       teaching: 'Teaching group',
       other: 'Other groups',
+      grepCode: 'Grep codes',
     },
     wrongUserInfoDisclaimer:
       'If any information is wrong, it must be updated by the host organization/school owner the user belongs to. An overview of available user support can be found here: ',
@@ -1073,6 +1076,7 @@ const messages = {
     detailView: 'Detailed listview',
     shortView: 'Card view',
     myPage: {
+      noRecents: "You haven't added any resources yet. This is how you get started:",
       imageAlt:
         'Medium close-up of girl holding a tablet. On top of the tablet there are colour samples in different shapes and colours. Graphic image.',
       confirmDeleteAccount: 'Are you sure you want to delete your account?',

package/src/locale/messages-nb.ts

@@ -1014,10 +1014,13 @@ const messages = {
     name: 'Navn',
     mail: 'E-post',
     username: 'Brukernavn',
+    mobile: 'Telefonnummer',
+    preferredLanguage: 'Foretrukket målform',
     groupTypes: {
       basic: 'Basisgruppe',
       teaching: 'Undervisningsgruppe',
       other: 'Andre grupper',
+      grepCode: 'Grepkoder',
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
@@ -1070,6 +1073,7 @@ const messages = {
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
     myPage: {
+      noRecents: 'Du har ikke lagt til noen ressurser ennå. Slik kommer du i gang:',
       imageAlt:
         'Halvnært bilde av jente som holder et nettbrett i hendene. Oppå nettbrettet ligger det ei samling fargeprøver i ulike former og farger. Grafikk.',
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',

package/src/locale/messages-nn.ts

@@ -1015,10 +1015,13 @@ const messages = {
     name: 'Namn',
     mail: 'E-post',
     username: 'Brukarnamn',
+    mobile: 'Telefonnummer',
+    preferredLanguage: 'Føretrekt målform',
     groupTypes: {
       basic: 'Basisgruppe',
       teaching: 'Undervisningsgruppe',
       other: 'Andre grupper',
+      grepCode: 'Grepkodar',
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: ',
@@ -1071,6 +1074,7 @@ const messages = {
     detailView: 'Detaljert listevisning',
     shortView: 'Kortvisning',
     myPage: {
+      noRecents: 'Du har ikkje lagt til nokon ressurar enno. Slik kjem du i gang:',
       imageAlt:
         'Halvnært bilete av jente som held eit nettbrett i hendene. Oppå nettbrettet ligg det ei samling fargeprøver i ulike former og fargar. Grafikk.',
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',

package/src/locale/messages-se.ts

@@ -31,49 +31,49 @@ const messages = {
   },
   tagSelector: {
     aria: {
-      screenReaderStatus: '{{count}} resultater tilgjengelig',
-      disabled: 'utilgjengelig',
-      selected: 'valgt',
-      focused: 'fokusert',
+      screenReaderStatus: '{{count}} bohtosa olámuttos',
+      disabled: 'ii olámuttos',
+      selected: 'válljejuvvon',
+      focused: 'fokuserejuvvon',
       guidance: {
         menu: {
-          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
-          enter: 'trykk enter for å velge den markerte emneknaggen',
-          escape: 'trykk escape for å lukke menyen',
-          tab: 'trykk tab for å velge emneknaggen og lukke menyen',
+          updown: 'Geavat njuollaboaluid vulos ja bajás válljet fáddágilkoriid',
+          enter: 'deaddil enter válljet merkejuvvon fáddágilkora',
+          escape: 'deaddil escape giddet fálu',
+          tab: 'deaddil tab válljet fáddágilkora ja giddet fálu',
         },
         input: {
-          select: 'Emneknagg-meny',
-          focused: 'er fokusert',
-          refine: 'skriv for å filtrere listen med emneknagger',
-          down: 'trykk pil ned for å åpne menyen',
-          left: 'trykk venstre pil for å fokusere valgte emneknagger',
-          space: 'trykk mellomrom for å opprette ny emneknagg',
+          select: 'Fáddágilkor-fállu',
+          focused: 'lea fokuserejuvvon',
+          refine: 'čále vai filtarasttet fáddágilkor listtu',
+          down: 'deaddil njuola vulos rahpat fálu',
+          left: 'deaddil gurut njuola fokuseret válljejuvvon fáddágilkoriid',
+          space: 'deaddil sátnegaskaboalu álggahit ođđa fáddágilkora',
         },
         value:
-          'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.',
+          'Geavat olgeš ja gurut njuolaid navigeret válljejuvvon fáddágilkoriid gaskkas, deaddil backspace sihkkut válljejuvvon fáddágilkora. Jus ii leat válljejuvvon fáddágilkor de sihkkojuvvo maŋimus.',
       },
       onChange: {
-        deselect: 'emneknagg {{label}}, fjernet.',
-        clear: 'Alle valgte emneknagger fjernet.',
-        initialFocus: `Emneknagger {{labels}}, valgt.`,
-        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
-        selected: 'Emneknagg {{label}},  valgt.',
+        deselect: 'fáddágilkor {{label}}, sihkkojuvvon.',
+        clear: 'Buot válljejuvvon fáddágilkorat sihkkojuvvon.',
+        initialFocus: `Fáddágilkorat {{labels}}, válljejuvvon.`,
+        selectedDisabled: 'Fáddágilkor {{label}} ii sáhte válljejuvvot. Vállje eará molsaeavttu.',
+        selected: 'Fáddágilkor {{label}},  vállejuvvon.',
       },
       onFocus: {
-        value: 'emneknagg {{label}} fokusert, {{position}}.',
-        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
-        of: 'av',
+        value: 'fáddágilkor {{label}} fokuserejuvvon, {{position}}.',
+        menu: 'fáddágilkor {{label}} {{status}}, {{position}}.',
+        of: 'eret',
       },
-      onFilter: ' for søkeord ',
+      onFilter: ' ohcansátnái ',
     },
-    noOptions: 'Ingen valgmuligheter',
+    noOptions: 'Eai leat válljenvejolašvuođat',
     label: 'Bija fáddágilkora',
-    createLabel: 'Legg til emneknagg {{tag}}',
+    createLabel: 'Lasit fáddágilkora {{tag}}',
     placeholder: 'Čále fáddágilkora',
     removeTag: 'Váldde eret {{name}}',
-    hideTags: 'Skjul emneknagger',
-    showTags: 'Vis emneknagger',
+    hideTags: 'Čiega fáddágilkoriid',
+    showTags: 'Čájet fáddágilkoriid',
   },
   htmlTitles: {
     titleTemplate,
@@ -1015,10 +1015,13 @@ const messages = {
     name: 'Namma',
     mail: 'Eboasta',
     username: 'Geavahan namma',
+    mobile: 'Telefonnummar',
+    preferredLanguage: 'Háliiduvvon giella',
     groupTypes: {
       basic: 'Vuođđojoavku',
       teaching: 'Oahpahusjoavku',
       other: 'Eará joavkkut',
+      grepCode: 'Grepkoda',
     },
     wrongUserInfoDisclaimer:
       'Jus leat boasttudieđut, de ferte organisašuvdna/skuvlaeaiggát masá geavaheaddji gullá ođasmahttit dan. Visogova geavaheaddjidoarjaga ektui gávnnat dás: ',
@@ -1072,6 +1075,7 @@ const messages = {
     shortView: 'Oanehis listu',
 
     myPage: {
+      noRecents: 'Du har ikkje lagt til nokon ressurar enno. Slik kjem du i gang:',
       imageAlt:
         'Halvnært bilde av jente som holder et nettbrett i hendene. Oppå nettbrettet ligger det ei samling fargeprøver i ulike former og farger. Grafikk.',
       confirmDeleteAccount: 'Leat go sihkar ahte dáhtut sihkkut kontu?',

package/src/locale/messages-sma.ts

@@ -1015,10 +1015,13 @@ const messages = {
     name: 'Navn',
     mail: 'E-post',
     username: 'Brukernavn',
+    mobile: 'Telefonnummer',
+    preferredLanguage: 'Føretrekt målform',
     groupTypes: {
       basic: 'Basisgruppe',
       teaching: 'Undervisningsgruppe',
       other: 'Andre grupper',
+      grepCode: 'Grepkodar',
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
@@ -1072,6 +1075,7 @@ const messages = {
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
     myPage: {
+      noRecents: 'Du har ikkje lagt til nokon ressurar enno. Slik kjem du i gang:',
       imageAlt:
         'Halvnært bilde av jente som holder et nettbrett i hendene. Oppå nettbrettet ligger det ei samling fargeprøver i ulike former og farger. Grafikk.',
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',

package/src/utils/createUniversalPortal.tsx

@@ -12,12 +12,7 @@ import React, { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
 function canUseDOM() {
-  return !!(
-    typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement &&
-    !window.document.hidden
-  ); // window.document.hidden === jsdom check
+  return !!(typeof window !== 'undefined' && window.document && !window.document.hidden); // window.document.hidden === jsdom check
 }
 
 export function createUniversalPortal(children: ReactNode, selector: string) {