@ndla/ui 3.3.6 → 3.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,16 +31,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.1.1",
-    "@ndla/carousel": "^1.0.6",
+    "@ndla/button": "^1.1.2",
+    "@ndla/carousel": "^1.0.7",
     "@ndla/core": "^0.7.2",
     "@ndla/hooks": "^1.0.7",
-    "@ndla/icons": "^1.3.1",
-    "@ndla/licenses": "^1.1.3",
-    "@ndla/modal": "^1.1.15",
-    "@ndla/safelink": "^1.0.6",
+    "@ndla/icons": "^1.3.2",
+    "@ndla/licenses": "^1.1.4",
+    "@ndla/modal": "^1.1.16",
+    "@ndla/safelink": "^1.0.7",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.12",
+    "@ndla/tabs": "^1.0.13",
     "@ndla/tooltip": "^0.2.49",
     "@ndla/util": "^2.0.1",
     "@reach/menu-button": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e113ebb9131b109b0b8225357a37623cfdec7500"
+  "gitHead": "442cac4c7229e4d8151b850ab4e8c4a6e0b7586c"
 }

package/src/AudioPlayer/Controls.tsx

@@ -415,9 +415,9 @@ const Controls = ({ src, title }: Props) => {
         <PlayButton type="button" onClick={togglePlay} title="play" aria-label="play">
           <span aria-hidden>
             {playing ? (
-              <Pause role="img" aria-label="pause" title="play" />
+              <Pause role="img" aria-label="Pause" title="Pause" />
             ) : (
-              <Play role="img" aria-label="play" title="play" />
+              <Play role="img" aria-label="Play" title="Play" />
             )}
           </span>
         </PlayButton>

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -26,11 +26,12 @@ const classes = new BEMHelper({
 interface Props {
   size: 'xx-small' | 'x-small' | 'small' | 'large';
   type: string;
+  title?: string;
   background?: boolean;
   border?: boolean;
 }
 
-export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
+export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true }: Props) => {
   const modifiers = [type, size];
 
   if (background) {
@@ -43,28 +44,28 @@ export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
   let icon = null;
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
-      icon = <SubjectMaterial />;
+      icon = <SubjectMaterial title={title} />;
       break;
     case contentTypes.TASKS_AND_ACTIVITIES:
-      icon = <TasksAndActivities />;
+      icon = <TasksAndActivities title={title} />;
       break;
     case contentTypes.ASSESSMENT_RESOURCES:
-      icon = <AssessmentResource />;
+      icon = <AssessmentResource title={title} />;
       break;
     case contentTypes.SUBJECT:
-      icon = <MenuBook />;
+      icon = <MenuBook title={title} />;
       break;
     case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      icon = <ExternalLearningResource />;
+      icon = <ExternalLearningResource title={title} />;
       break;
     case contentTypes.SOURCE_MATERIAL:
-      icon = <SharedResource />;
+      icon = <SharedResource title={title} />;
       break;
     case contentTypes.LEARNING_PATH:
-      icon = <LearningPath />;
+      icon = <LearningPath title={title} />;
       break;
     case contentTypes.TOPIC:
-      icon = <Subject />;
+      icon = <Subject title={title} />;
       break;
     default:
       break;
@@ -75,6 +76,7 @@ export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
 ContentTypeBadge.propTypes = {
   size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'large']),
   type: ContentTypeShape,
+  title: PropTypes.string,
   background: PropTypes.bool,
   border: PropTypes.bool,
 };

package/src/Programme/Programme.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import LayoutItem, { OneColumn } from '../Layout';
@@ -65,19 +65,7 @@ type Props = GradesProps & {
   image?: string;
 };
 
-export const Programme = ({ heading, image, grades }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(0);
-  const isWindowContext = typeof window !== 'undefined';
-
-  useEffect(() => {
-    if (isWindowContext) {
-      const rememberGradeIndex = window.localStorage.getItem('programmeShowGradeIndex') || '0';
-      if (grades.length > Number(rememberGradeIndex)) {
-        setShowGradeIndex(Number(rememberGradeIndex));
-      }
-    }
-  }, [isWindowContext, grades]);
-
+export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade }: Props) => {
   return (
     <StyledWrapper>
       <StyledBackground image={image} />
@@ -87,7 +75,7 @@ export const Programme = ({ heading, image, grades }: Props) => {
             <StyledContentWrapper>
               <NavigationHeading>{heading}</NavigationHeading>
               <SubjectsWrapper>
-                <ProgrammeSubjects grades={grades} preSelectedGradeIndex={showGradeIndex} />
+                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
               </SubjectsWrapper>
             </StyledContentWrapper>
           </LayoutItem>

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 // @ts-ignore
 import Button from '@ndla/button';
@@ -27,6 +27,8 @@ const GradesMenu = styled.div`
 `;
 
 export type GradesProps = {
+  selectedGrade?: string;
+  onChangeGrade: (newGrade: string) => void;
   grades: {
     name: string;
     categories: {
@@ -40,47 +42,27 @@ export type GradesProps = {
 };
 
 type Props = GradesProps & {
-  preSelectedGradeIndex?: number;
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, preSelectedGradeIndex = 0 }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(preSelectedGradeIndex);
-  const isWindowContext = typeof window !== 'undefined';
-
-  const toggleGradeIndex = (index: number) => {
-    setShowGradeIndex(index);
-    if (isWindowContext) {
-      window.localStorage.setItem('programmeShowGradeIndex', `${index}`);
-    }
-  };
-
-  const selectedGrade = grades[showGradeIndex];
+const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+  const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
   return (
     <>
       <GradesMenu>
-        {grades.map((item, index) => (
+        {grades.map((item) => (
           <Button
             key={item.name}
-            onClick={() => toggleGradeIndex(index)}
-            lighter={showGradeIndex !== index}
+            onClick={() => onChangeGrade(item.name.toLowerCase())}
+            lighter={item !== grade}
             size="normal"
             borderShape="rounded">
             {item.name}
           </Button>
         ))}
       </GradesMenu>
-      {selectedGrade.categories.map((category) => (
-        <NavigationBox
-          key={category.name}
-          heading={category.name}
-          items={category.subjects}
-          onClick={() => {
-            if (onNavigate) {
-              onNavigate();
-            }
-          }}
-        />
+      {grade.categories.map((category) => (
+        <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}
     </>
   );

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -85,7 +85,7 @@ type Props = {
 const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
   <HeaderWrapper>
     <TypeWrapper>
-      {type && <ContentTypeBadge type={type} background size="large" />}
+      {type && <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background size="large" />}
       <SubjectName>
         {type && <b>{t(`contentTypes.${type}`)}</b>}{' '}
         {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}