@ndla/ui 33.2.0 → 33.3.0

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,30 +6,24 @@
  *
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
-import { breakpoints, mq } from '@ndla/core';
+import { spacing } from '@ndla/core';
+import { SafeLinkButton } from '@ndla/safelink';
 import { NavigationBox } from '../Navigation';
 import { MessageBox } from '../Messages';
 
-const GradesMenu = styled.div`
-  margin-bottom: 28px;
-  > * {
-    margin-right: 10px;
-  }
-  > *:last-of-type {
-    margin-right: 0;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 40px;
+const GradesMenu = styled.ul`
+  display: flex;
+  gap: ${spacing.small};
+  li {
+    list-style: none;
   }
 `;
 
 export type GradesProps = {
   selectedGrade?: string;
-  onChangeGrade: (newGrade: string) => void;
   grades: {
     missingProgrammeSubjects?: boolean;
     name: string;
@@ -47,22 +41,32 @@ type Props = GradesProps & {
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props) => {
   const { t } = useTranslation();
-  const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
+
+  const grade = useMemo(
+    () => grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0],
+    [grades, selectedGrade],
+  );
+
   return (
     <>
-      <GradesMenu>
-        {grades.map((item) => (
-          <Button
-            key={item.name}
-            onClick={() => onChangeGrade(item.name.toLowerCase())}
-            lighter={item !== grade}
-            size="normal"
-            borderShape="rounded">
-            {item.name}
-          </Button>
-        ))}
+      <GradesMenu aria-label={t('programme.grades')}>
+        {grades.map((item) => {
+          const current = item.name.toLowerCase() === selectedGrade;
+          return (
+            <li key={item.name}>
+              <SafeLinkButton
+                to={current ? '' : item.name.toLowerCase()}
+                lighter={item !== grade}
+                borderShape="rounded"
+                buttonSize="normal"
+                aria-current={current}>
+                {item.name}
+              </SafeLinkButton>
+            </li>
+          );
+        })}
       </GradesMenu>
       {grade.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
       {grade.categories.map((category) => (

package/src/Table/Table.tsx

@@ -8,60 +8,27 @@
 
 import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { ZoomOutMap } from '@ndla/icons/common';
-
-import { uuid } from '@ndla/util';
-import Dialog from '../Dialog';
 
 const classes = BEMHelper('c-table');
 
 interface Props {
   id?: string;
-  messages: {
-    dialogCloseButton: string;
-    expandButtonLabel: string;
-  };
   children?: ReactNode;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
 }
 
-const Table = ({ children, messages, id, ...rest }: Props) => {
-  const tableId = id || uuid();
-  const dialogId = `dialog-${tableId}`;
-
+const Table = ({ children, id, ...rest }: Props) => {
   return (
     <div {...classes('wrapper')}>
       <div {...classes('content')}>
         <div {...classes('left-shadow')} />
-        <table id={tableId} {...classes({ extra: ['o-table'] })} {...rest}>
+        <table id={id} {...classes({ extra: ['o-table'] })} {...rest}>
           {children}
         </table>
-        <button
-          type="button"
-          data-dialog-trigger-id={dialogId}
-          data-dialog-source-id={tableId}
-          data-table-id={tableId}
-          {...classes('expand-button')}
-          aria-label={messages.expandButtonLabel}>
-          <ZoomOutMap />
-        </button>
         <div {...classes('right-shadow')} />
       </div>
-      <Dialog
-        id={dialogId}
-        label={messages.expandButtonLabel}
-        messages={{
-          close: messages.dialogCloseButton,
-        }}
-        modifier="fullscreen">
-        <div {...classes('dialog')}>
-          <div {...classes('expanded-table-wrapper')}>
-            <div {...classes('content')} />
-          </div>
-        </div>
-      </Dialog>
     </div>
   );
 };

package/src/Table/component.tables.scss

@@ -26,39 +26,6 @@
     @include mq($from: desktop) {
       @include grids-expand(4, 6, 2);
     }
-
-    &--has-scroll {
-      .c-table {
-        padding-bottom: $spacing;
-
-        &__expand-button {
-          @include mq($from: wide) {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-  &__expand-button {
-    display: none;
-    background: $brand-color--lighter;
-    border: 0;
-    height: 38px;
-    width: 38px;
-    border-radius: 0;
-    margin: $spacing 0 0 auto;
-  }
-
-  &__expanded-table-wrapper {
-    display: inline-block;
-    background: $white;
-    padding: $spacing--medium $spacing--medium $spacing--large $spacing--medium;
-    margin: $spacing--large;
-  }
-
-  &__dialog {
-    text-align: center;
   }
 
   &__content {

package/src/TopicMenu/SubtopicLinkList.jsx

@@ -7,7 +7,6 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Back, ChevronRight } from '@ndla/icons/common';
 import { Switch } from '@ndla/switch';
 import styled from '@emotion/styled';
@@ -15,7 +14,6 @@ import { css } from '@emotion/react';
 import { mq, breakpoints, fonts, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { withTranslation } from 'react-i18next';
-import { TopicShape } from '../shapes';
 import ContentTypeResult from '../Search/ContentTypeResult';
 import { renderAdditionalIcon } from './TopicMenu';
 
@@ -85,17 +83,6 @@ const SubtopicLink = ({
   );
 };
 
-SubtopicLink.propTypes = {
-  classes: PropTypes.func.isRequired,
-  subtopic: TopicShape.isRequired,
-  to: PropTypes.string.isRequired,
-  onSubtopicExpand: PropTypes.func,
-  expandedSubtopicId: PropTypes.string,
-  toTopic: PropTypes.func,
-  subtopicId: PropTypes.string,
-  additionalTooltipLabel: PropTypes.string,
-};
-
 class SubtopicLinkList extends Component {
   constructor(props) {
     super(props);
@@ -257,21 +244,4 @@ class SubtopicLinkList extends Component {
   }
 }
 
-SubtopicLinkList.propTypes = {
-  resourceToLinkProps: PropTypes.func.isRequired,
-  expandedSubtopicId: PropTypes.string,
-  onSubtopicExpand: PropTypes.func,
-  classes: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeMenu: PropTypes.func.isRequired,
-  topic: TopicShape.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  onGoBack: PropTypes.func.isRequired,
-  backLabel: PropTypes.string.isRequired,
-  defaultCount: PropTypes.number,
-  t: PropTypes.func.isRequired,
-  lastOpen: PropTypes.bool,
-  isUngrouped: PropTypes.bool,
-};
-
 export default withTranslation()(SubtopicLinkList);

package/src/TopicMenu/TopicMenu.jsx

@@ -10,7 +10,6 @@
 /* eslint jsx-a11y/no-noninteractive-element-to-interactive-role: 1 */
 
 import React, { Fragment, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import debounce from 'lodash/debounce';
 import { spacing } from '@ndla/core';
@@ -24,7 +23,6 @@ import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import SubtopicLinkList from './SubtopicLinkList';
-import { TopicShape } from '../shapes';
 
 import Logo from '../Logo';
 import FrontpageAllSubjects from '../Frontpage/FrontpageAllSubjects';
@@ -365,74 +363,6 @@ export const TopicMenu = ({
   );
 };
 
-TopicMenu.propTypes = {
-  topics: PropTypes.arrayOf(TopicShape).isRequired,
-  toFrontpage: PropTypes.func.isRequired,
-  toTopic: PropTypes.func,
-  closeAlert: PropTypes.func,
-  toSubject: PropTypes.func,
-  close: PropTypes.func,
-  defaultCount: PropTypes.number,
-  subjectTitle: PropTypes.string,
-  resourceToLinkProps: PropTypes.func.isRequired,
-  onNavigate: PropTypes.func.isRequired,
-  expandedTopicId: PropTypes.string,
-  expandedSubtopicsId: PropTypes.arrayOf(PropTypes.string).isRequired,
-  hideSearch: PropTypes.bool,
-  searchFieldComponent: PropTypes.node,
-  locale: PropTypes.string,
-  messages: PropTypes.arrayOf(
-    PropTypes.shape({
-      content: PropTypes.string.isRequired,
-      closable: PropTypes.bool.isRequired,
-      number: PropTypes.number.isRequired,
-    }),
-  ),
-  subjectCategories: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      subjects: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string.isRequired,
-          url: PropTypes.string.isRequired,
-        }),
-      ),
-    }),
-  ),
-  programmes: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-    }),
-  ),
-  currentProgramme: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    grades: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        categories: PropTypes.arrayOf(
-          PropTypes.shape({
-            name: PropTypes.string,
-            subjects: PropTypes.arrayOf(
-              PropTypes.shape({
-                label: PropTypes.string.isRequired,
-                url: PropTypes.string.isRequired,
-              }),
-            ),
-          }),
-        ),
-      }),
-    ).isRequired,
-    selectedGradeIndex: PropTypes.number,
-  }),
-  initialSelectedMenu: PropTypes.oneOf([
-    MENU_CURRENT_SUBJECT,
-    MENU_CURRENT_PROGRAMME,
-    MENU_PROGRAMMES,
-    MENU_ALL_SUBJECTS,
-  ]),
-};
-
 TopicMenu.defaultProps = {
   defaultCount: 12,
 };

package/src/TopicMenu/TopicMenuButton.jsx

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
@@ -49,9 +48,4 @@ const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (
   </Button>
 );
 
-TopicMenuButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  ndlaFilm: PropTypes.bool,
-};
-
 export default TopicMenuButton;

package/src/locale/messages-en.ts

@@ -261,6 +261,7 @@ const messages = {
     removeFavorite: 'Remove favorite subject',
     removeConfirmed: '{{subject}} is removed from your favorite subjects',
     addConfirmed: '{{subject}} is added to your favorite subjects',
+    shows: 'Shows',
   },
   topicPage: {
     articleErrorDescription: 'Sorry, an error occurred while loading the topic description.',
@@ -851,6 +852,7 @@ const messages = {
     searching: 'Searching...',
     create: 'Create new',
     isSelectedItem: 'Added',
+    selected: '{{count}} selected',
   },
   blogPosts: {
     blog1: {
@@ -1197,6 +1199,9 @@ const messages = {
     contact: 'Contact',
     help: 'Help',
   },
+  programme: {
+    grades: 'Grades',
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -260,6 +260,7 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
@@ -850,6 +851,7 @@ const messages = {
     searching: 'Søker...',
     create: 'Opprett ny',
     isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1194,6 +1196,9 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -260,6 +260,7 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjerna frå favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Orsak, ein feil oppstod under lasting av emneskildringa.',
@@ -851,6 +852,7 @@ const messages = {
     searching: 'Søkjer...',
     create: 'Opprett ny',
     isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1195,6 +1197,9 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/locale/messages-se.ts

@@ -260,6 +260,7 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Šállošat, boasttuvuohta čuožžilii fáddáčilgehusa viežžamis.',
@@ -851,6 +852,7 @@ const messages = {
     searching: 'Ohcá...',
     create: 'Ráhkat ođđa',
     isSelectedItem: 'Lasihuvvon',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1196,6 +1198,9 @@ const messages = {
     contact: 'Váldde oktavuođa',
     help: 'Veahket',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/locale/messages-sma.ts

@@ -260,6 +260,7 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
@@ -851,6 +852,7 @@ const messages = {
     searching: 'Søker...',
     create: 'Opprett ny',
     isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1196,6 +1198,9 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/main.scss

@@ -17,7 +17,6 @@
 @import 'MediaList/component.medialist';
 @import 'RelatedArticleList/component.related-articles';
 @import 'ContentTypeBadge/component.content-type-badge';
-@import 'global/components/component.source-list';
 @import 'Table/component.tables';
 @import 'TopicMenu/component.topic-menu';
 @import 'Filter/component.filter';

package/es/internal-icons/Book.js

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var Book = function Book(_ref) {
-  var className = _ref.className;
-  return _jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1",
-    width: "26",
-    height: "26",
-    viewBox: "0 0 26 26",
-    className: className,
-    children: _jsx("path", {
-      d: "M 4 1 L 4 19 C 7.4 19 10 18.30625 12 19.90625 L 12 2.8125 C 10 1.0125 7.4 1 4 1 z M 22 1 C 18.6 1 16 1.0125 14 2.8125 L 14 19.90625 C 16 18.30625 18.6 19 22 19 L 22 1 z M 1 4 C 0.4 4 0 4.4 0 5 L 0 23 C 0 23.6 0.4 24 1 24 L 9.09375 24 C 10.09375 24 11.4 25.90625 13 25.90625 C 14.6 25.90625 15.90625 24 16.90625 24 L 25 24 C 25.6 24 26 23.6 26 23 L 26 5 C 26 4.4 25.6 4 25 4 L 24 4 L 24 19 C 24 20.5 23.5 21 22 21 L 17.6875 21 C 15.9875 21 15.2875 21.09375 14.6875 22.09375 C 14.2875 22.69375 13.7 23 13 23 C 12.3 23 11.7125 22.69375 11.3125 22.09375 C 10.7125 21.09375 9.9125 21 8.3125 21 L 4 21 C 2.5 21 2 20.4 2 19 L 2 4 L 1 4 z"
-    })
-  });
-};
-Book.propTypes = {
-  className: PropTypes.string.isRequired
-};
-export default Book;

package/es/internal-icons/Download.js

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var Download = function Download(_ref) {
-  var className = _ref.className;
-  return _jsx("svg", {
-    version: "1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 32 32",
-    className: className,
-    children: _jsx("path", {
-      className: "path1",
-      d: "M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z"
-    })
-  });
-};
-Download.propTypes = {
-  className: PropTypes.string.isRequired
-};
-export default Download;

package/es/internal-icons/Embed.js

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var Embed = function Embed(_ref) {
-  var className = _ref.className;
-  return _jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 50 50",
-    className: className,
-    children: _jsx("path", {
-      d: "M 29.125 7.34375 L 17.125 41.34375 L 20.875 42.65625 L 32.875 8.65625 L 29.125 7.34375 z M 9.9375 13.375 L 1.25 23.71875 L 0.1875 25 L 1.25 26.28125 L 9.9375 36.65625 L 13.03125 34.09375 L 5.40625 25 L 13 15.9375 L 9.9375 13.375 z M 40.0625 13.375 L 37 15.9375 L 44.59375 25 L 37 34.0625 L 40.09375 36.625 L 48.71875 26.28125 L 49.78125 25 L 48.71875 23.71875 L 40.0625 13.375 z"
-    })
-  });
-};
-Embed.propTypes = {
-  className: PropTypes.string.isRequired
-};
-export default Embed;

package/es/internal-icons/InsertTemplate.js

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var InsertTemplate = function InsertTemplate(_ref) {
-  var className = _ref.className;
-  return _jsx("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "32",
-    viewBox: "0 0 32 32",
-    className: className,
-    children: _jsx("path", {
-      d: "M12 6h4v2h-4zM18 6h4v2h-4zM28 6v8h-6v-2h4v-4h-2v-2zM10 12h4v2h-4zM16 12h4v2h-4zM6 8v4h2v2h-4v-8h6v2zM12 18h4v2h-4zM18 18h4v2h-4zM28 18v8h-6v-2h4v-4h-2v-2zM10 24h4v2h-4zM16 24h4v2h-4zM6 20v4h2v2h-4v-8h6v2zM30 2h-28v28h28v-28zM32 0v0 32h-32v-32h32z"
-    })
-  });
-};
-InsertTemplate.propTypes = {
-  className: PropTypes.string.isRequired
-};
-export default InsertTemplate;

package/es/internal-icons/OpenWindow.js

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var OpenWindow = function OpenWindow(_ref) {
-  var className = _ref.className;
-  return _jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 50 50",
-    className: className,
-    children: _jsx("path", {
-      d: "M 7 7 C 5.3 7 4 8.3 4 10 L 4 38 L 6 36 L 6 15 L 44 15 L 44 40 C 44 40.6 43.6 41 43 41 L 11 41 L 9 43 L 43 43 C 44.7 43 46 41.7 46 40 L 46 10 C 46 8.3 44.7 7 43 7 L 7 7 z M 7 9 L 43 9 C 43.6 9 44 9.4 44 10 L 44 13 L 6 13 L 6 10 C 6 9.4 6.4 9 7 9 z M 8 10 C 7.4477153 10 7 10.447715 7 11 C 7 11.552285 7.4477153 12 8 12 C 8.5522847 12 9 11.552285 9 11 C 9 10.447715 8.5522847 10 8 10 z M 11 10 C 10.447715 10 10 10.447715 10 11 C 10 11.552285 10.447715 12 11 12 C 11.552285 12 12 11.552285 12 11 C 12 10.447715 11.552285 10 11 10 z M 14 10 C 13.447715 10 13 10.447715 13 11 C 13 11.552285 13.447715 12 14 12 C 14.552285 12 15 11.552285 15 11 C 15 10.447715 14.552285 10 14 10 z M 11 24 L 11 26 L 19.59375 26 L 4.09375 41.5 L 5.5 42.90625 L 21 27.40625 L 21 36 L 23 36 L 23 25 L 23 24 L 22 24 L 11 24 z"
-    })
-  });
-};
-OpenWindow.propTypes = {
-  className: PropTypes.string.isRequired
-};
-export default OpenWindow;