@ndla/ui 24.2.2 → 25.0.2

package/lib/index-javascript.js

@@ -5,30 +5,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FilterList", {
-  enumerable: true,
-  get: function get() {
-    return _Filter.FilterList;
-  }
-});
-Object.defineProperty(exports, "FilterListPhone", {
-  enumerable: true,
-  get: function get() {
-    return _Filter.FilterListPhone;
-  }
-});
-Object.defineProperty(exports, "FilterButtons", {
-  enumerable: true,
-  get: function get() {
-    return _Filter.FilterButtons;
-  }
-});
-Object.defineProperty(exports, "TopicIntroductionList", {
-  enumerable: true,
-  get: function get() {
-    return _TopicIntroductionList["default"];
-  }
-});
 Object.defineProperty(exports, "TopicMenu", {
   enumerable: true,
   get: function get() {
@@ -41,47 +17,9 @@ Object.defineProperty(exports, "TopicMenuButton", {
     return _TopicMenu.TopicMenuButton;
   }
 });
-Object.defineProperty(exports, "CompetenceGoals", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals["default"];
-  }
-});
-Object.defineProperty(exports, "CompetenceGoalList", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals.CompetenceGoalList;
-  }
-});
-Object.defineProperty(exports, "CompetenceGoalListHeading", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals.CompetenceGoalListHeading;
-  }
-});
-Object.defineProperty(exports, "CompetenceGoal", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals.CompetenceGoal;
-  }
-});
-Object.defineProperty(exports, "CompetenceGoalsDialog", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals.CompetenceGoalsDialog;
-  }
-});
-
-var _Filter = require("./Filter");
-
-var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));
 
-var _CompetenceGoals = _interopRequireWildcard(require("./CompetenceGoals"));
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/index.d.ts

@@ -7,12 +7,15 @@
  */
 /** @ts-ignore */
 export * from './index-javascript';
+export { default as SectionHeading } from './SectionHeading';
 export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, ArticleFavoritesButton, } from './Article';
+export { CompetenceGoalsDialog } from './CompetenceGoals';
+export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
-export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight } from './Masthead';
+export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight, SkipToMainContent } from './Masthead';
 export { default as Portrait } from './Portrait';
 export { default as ContentLoader } from './ContentLoader';
 export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
@@ -28,6 +31,7 @@ export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 export type { ImageCrop, ImageFocalPoint } from './Image';
 export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
+export { FilterList, FilterListPhone, FilterButtons } from './Filter';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
 export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
 export type { FigureType } from './Figure';
@@ -72,7 +76,7 @@ export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList
 export { DisplayOnPageYOffset } from './Animation';
 export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta, } from './MediaList';
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, ExternalLearningResourcesBadge, SourceMaterialBadge, } from './ContentTypeBadge';
-export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
+export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';
 export { default as ContentPlaceholder } from './ContentPlaceholder';

package/lib/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  SectionHeading: true,
   ArticleByline: true,
   ArticleContent: true,
   ArticleFootNotes: true,
@@ -16,6 +17,8 @@ var _exportNames = {
   ArticleSideBar: true,
   Article: true,
   ArticleFavoritesButton: true,
+  CompetenceGoalsDialog: true,
+  TopicIntroductionList: true,
   Table: true,
   ResourcesWrapper: true,
   ResourcesTitle: true,
@@ -26,6 +29,7 @@ var _exportNames = {
   MastheadItem: true,
   getMastheadHeight: true,
   useMastheadHeight: true,
+  SkipToMainContent: true,
   Portrait: true,
   ContentLoader: true,
   RelatedArticleList: true,
@@ -59,6 +63,9 @@ var _exportNames = {
   SourceMaterialHero: true,
   Hero: true,
   NdlaFilmHero: true,
+  FilterList: true,
+  FilterListPhone: true,
+  FilterButtons: true,
   Footer: true,
   EditorName: true,
   FooterText: true,
@@ -158,7 +165,6 @@ var _exportNames = {
   SubjectCarousel: true,
   SubjectChildContent: true,
   SubjectContent: true,
-  SubjectFilter: true,
   SubjectFlexChild: true,
   SubjectFlexWrapper: true,
   SubjectHeader: true,
@@ -195,6 +201,12 @@ var _exportNames = {
   ActiveFilters: true,
   ToggleSearchButton: true
 };
+Object.defineProperty(exports, "SectionHeading", {
+  enumerable: true,
+  get: function get() {
+    return _SectionHeading["default"];
+  }
+});
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
   get: function get() {
@@ -255,6 +267,18 @@ Object.defineProperty(exports, "ArticleFavoritesButton", {
     return _Article.ArticleFavoritesButton;
   }
 });
+Object.defineProperty(exports, "CompetenceGoalsDialog", {
+  enumerable: true,
+  get: function get() {
+    return _CompetenceGoals.CompetenceGoalsDialog;
+  }
+});
+Object.defineProperty(exports, "TopicIntroductionList", {
+  enumerable: true,
+  get: function get() {
+    return _TopicIntroductionList["default"];
+  }
+});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
@@ -315,6 +339,12 @@ Object.defineProperty(exports, "useMastheadHeight", {
     return _Masthead.useMastheadHeight;
   }
 });
+Object.defineProperty(exports, "SkipToMainContent", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.SkipToMainContent;
+  }
+});
 Object.defineProperty(exports, "Portrait", {
   enumerable: true,
   get: function get() {
@@ -513,6 +543,24 @@ Object.defineProperty(exports, "NdlaFilmHero", {
     return _Hero.NdlaFilmHero;
   }
 });
+Object.defineProperty(exports, "FilterList", {
+  enumerable: true,
+  get: function get() {
+    return _Filter.FilterList;
+  }
+});
+Object.defineProperty(exports, "FilterListPhone", {
+  enumerable: true,
+  get: function get() {
+    return _Filter.FilterListPhone;
+  }
+});
+Object.defineProperty(exports, "FilterButtons", {
+  enumerable: true,
+  get: function get() {
+    return _Filter.FilterButtons;
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -1107,12 +1155,6 @@ Object.defineProperty(exports, "SubjectContent", {
     return _Subject.SubjectContent;
   }
 });
-Object.defineProperty(exports, "SubjectFilter", {
-  enumerable: true,
-  get: function get() {
-    return _Subject.SubjectFilter;
-  }
-});
 Object.defineProperty(exports, "SubjectFlexChild", {
   enumerable: true,
   get: function get() {
@@ -1337,8 +1379,14 @@ Object.keys(_indexJavascript).forEach(function (key) {
   });
 });
 
+var _SectionHeading = _interopRequireDefault(require("./SectionHeading"));
+
 var _Article = _interopRequireWildcard(require("./Article"));
 
+var _CompetenceGoals = require("./CompetenceGoals");
+
+var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
+
 var _Table = _interopRequireDefault(require("./Table"));
 
 var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
@@ -1375,6 +1423,8 @@ var _Image = _interopRequireWildcard(require("./Image"));
 
 var _Hero = require("./Hero");
 
+var _Filter = require("./Filter");
+
 var _Footer = require("./Footer");
 
 var _Figure = require("./Figure");
@@ -1477,8 +1527,8 @@ var _TreeStructure = require("./TreeStructure");
 
 var _Search = require("./Search");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "24.2.2",
+  "version": "25.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,18 +32,18 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.3.3",
-    "@ndla/carousel": "^1.2.17",
+    "@ndla/button": "^3.3.4",
+    "@ndla/carousel": "^1.2.18",
     "@ndla/core": "^2.3.4",
-    "@ndla/forms": "^3.1.6",
+    "@ndla/forms": "^3.1.7",
     "@ndla/hooks": "^1.1.5",
-    "@ndla/icons": "^1.11.5",
-    "@ndla/licenses": "^5.0.10",
-    "@ndla/modal": "^1.3.1",
-    "@ndla/notion": "^3.1.34",
-    "@ndla/safelink": "^2.2.9",
+    "@ndla/icons": "^1.11.6",
+    "@ndla/licenses": "^5.0.11",
+    "@ndla/modal": "^1.3.2",
+    "@ndla/notion": "^3.1.35",
+    "@ndla/safelink": "^2.2.10",
     "@ndla/switch": "^0.1.12",
-    "@ndla/tabs": "^1.1.16",
+    "@ndla/tabs": "^1.1.17",
     "@ndla/tooltip": "^2.2.0",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.0.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5150e405d5a94a7a48e57331da3bbac47537833c"
+  "gitHead": "67a6b882ad4c1c4619fe0ffae2f226275b1db676"
 }

package/src/CompetenceGoals/{CompetenceGoalsDialog.jsx → CompetenceGoalsDialog.tsx}

@@ -6,14 +6,12 @@
  *
  */
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { fonts } from '@ndla/core';
+import { breakpoints, fonts, mq } from '@ndla/core';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { FooterHeaderIcon } from '@ndla/icons/common';
 import styled from '@emotion/styled';
-import { classes } from './CompetenceGoals';
 
 const HeaderWrapper = styled.div`
   padding: 14px 20px 14px 0;
@@ -31,7 +29,35 @@ const HeadingWrapper = styled.h2`
   font-weight: ${fonts.weight.semibold};
 `;
 
-export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }) => {
+interface Props {
+  children?: ReactNode;
+  modalProps?: ComponentProps<typeof Modal>;
+  isOpen?: boolean;
+  onClose?: () => void;
+  subjectName?: string;
+  curriculums?: {
+    id: string;
+    name: string;
+    goals?: {
+      id: string;
+      name: string;
+    }[];
+  }[];
+}
+
+const CompetenceGoalsWrapper = styled.div`
+  height: 100%;
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 32px;
+
+  ${mq.range({ from: breakpoints.mobile })} {
+    padding: 0;
+  }
+`;
+
+export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }: Props) => {
   const { t } = useTranslation();
   const iconId = 'popupCompetenceGoals';
 
@@ -46,7 +72,7 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
       backgroundColor="light-gradient"
       narrow>
       {(close) => (
-        <Fragment>
+        <>
           <ModalHeader modifier="menu">
             <HeaderWrapper>
               <HeadingWrapper>
@@ -57,30 +83,12 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
             </HeaderWrapper>
           </ModalHeader>
           <ModalBody>
-            <div {...classes()} className="c-competence-goals">
-              {children}
-            </div>
+            <CompetenceGoalsWrapper>{children}</CompetenceGoalsWrapper>
           </ModalBody>
-        </Fragment>
+        </>
       )}
     </Modal>
   );
 };
 
-CompetenceGoalsDialog.propTypes = {
-  curriculums: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      goals: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          name: PropTypes.string.isRequired,
-        }),
-      ),
-    }),
-  ),
-  subjectName: PropTypes.string,
-};
-
 export default CompetenceGoalsDialog;

package/src/CompetenceGoals/index.ts

@@ -0,0 +1 @@
+export { default as CompetenceGoalsDialog } from './CompetenceGoalsDialog';

package/src/Filter/FilterButtons.tsx

@@ -12,7 +12,6 @@ import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-// @ts-ignore
 import ToggleItem from './ToggleItem';
 import FilterCarousel from './FilterCarousel';
 

package/src/Filter/FilterList.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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.
+ * FRI OG BEGRENSET
+ */
+
+import React, { ReactNode, useState } from 'react';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
+
+import { classes } from './filterClasses';
+import ToggleItem from './ToggleItem';
+
+interface Props {
+  children?: ReactNode;
+  label?: string;
+  preid?: string;
+  labelNotVisible?: boolean;
+  modifiers?: string;
+  onChange?: Function;
+  options: {
+    title: string;
+    value: string;
+    hits?: number;
+    icon?: ReactNode;
+    noResults?: boolean;
+  }[];
+  values: string[];
+  defaultVisibleCount?: number;
+  showLabel?: string;
+  noFilterSelectedLabel?: string;
+  hideLabel?: string;
+  alignedGroup?: boolean;
+  collapseMobile?: boolean;
+}
+
+const FilterList = ({
+  modifiers = '',
+  preid = '',
+  label = 'FILTER:',
+  labelNotVisible,
+  options,
+  values = [],
+  onChange,
+  defaultVisibleCount,
+  showLabel,
+  hideLabel,
+  alignedGroup,
+  collapseMobile,
+  noFilterSelectedLabel,
+}: Props) => {
+  const [visibleCount, setVisibleCount] = useState<number | undefined>(defaultVisibleCount);
+
+  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
+  const labelModifiers = [];
+
+  if (labelNotVisible) {
+    labelModifiers.push('hidden');
+  }
+
+  return (
+    <section {...classes('list', modifiers)}>
+      {label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
+      {noFilterSelectedLabel && options.length === 0 && (
+        <span {...classes('no-filter-selected')}>{noFilterSelectedLabel}</span>
+      )}
+      <ul
+        {...classes('item-wrapper', {
+          'aligned-grouping': !!alignedGroup,
+          'collapse-mobile': !!collapseMobile,
+        })}>
+        {options.map((option, index) => {
+          const itemModifiers = [];
+
+          const checked = values.some((value) => value === option.value);
+
+          if (!showAll && !checked && index + 1 > (visibleCount ?? 0)) {
+            itemModifiers.push('hidden');
+          }
+
+          const disabled = option.noResults || option.hits === 0;
+
+          if (disabled) {
+            itemModifiers.push('no-results');
+          }
+
+          return (
+            <ToggleItem
+              modifiers={itemModifiers}
+              id={preid + option.value}
+              key={option.value}
+              value={option.value}
+              disabled={disabled}
+              tabIndex={disabled ? -1 : 0}
+              checked={checked}
+              label={option.title}
+              onChange={(event) => {
+                let newValues = null;
+                if (event.currentTarget.checked) {
+                  newValues = [...values, option.value];
+                } else {
+                  newValues = values.filter((value) => value !== option.value);
+                }
+                if (onChange) {
+                  onChange(newValues, option.value);
+                }
+              }}
+            />
+          );
+        })}
+      </ul>
+      {!showAll && (
+        <button
+          {...classes('expand')}
+          type="button"
+          onClick={() => {
+            setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
+          }}>
+          {visibleCount === defaultVisibleCount ? (
+            <>
+              <span>{showLabel}</span> <ChevronDown />
+            </>
+          ) : (
+            <>
+              <span>{hideLabel}</span> <ChevronUp />
+            </>
+          )}
+        </button>
+      )}
+    </section>
+  );
+};
+
+export default FilterList;