@ndla/ui 2.1.1 → 2.1.5

package/lib/TopicMenu/TopicMenu.js

@@ -110,7 +110,8 @@ var TopicMenu = function TopicMenu(_ref) {
       onNavigate = _ref.onNavigate,
       subjectCategories = _ref.subjectCategories,
       programmes = _ref.programmes,
-      currentProgramme = _ref.currentProgramme;
+      currentProgramme = _ref.currentProgramme,
+      initialSelectedMenu = _ref.initialSelectedMenu;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -120,7 +121,9 @@ var TopicMenu = function TopicMenu(_ref) {
       isNarrowScreen = _useState2[0],
       setIsNarrowScreen = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(MENU_CURRENT_SUBJECT),
+  var _useState3 = (0, _react.useState)(function () {
+    return initialSelectedMenu || MENU_CURRENT_SUBJECT;
+  }),
       _useState4 = _slicedToArray(_useState3, 2),
       selectedMenu = _useState4[0],
       setSelectedMenu = _useState4[1];
@@ -219,7 +222,7 @@ var TopicMenu = function TopicMenu(_ref) {
     narrow: true
   }), (0, _core.jsx)(_safelink["default"], _extends({}, classes('back-link'), {
     to: toFrontpage()
-  }), (0, _core.jsx)(_common.Home, classes('home-icon', '', 'c-icon--20')), t('masthead.menu.toFrontpage'))), (0, _core.jsx)("div", classes('subject'), (0, _core.jsx)("div", classes('subject__header'), (0, _core.jsx)("div", classes('subject__header__menu-filter'), (0, _core.jsx)(_button["default"], {
+  }), (0, _core.jsx)(_common.Home, classes('home-icon', '', 'c-icon--20')), t('masthead.menu.toFrontpage'))), (0, _core.jsx)("div", classes('subject'), (0, _core.jsx)("div", classes('subject__header'), (0, _core.jsx)("div", classes('subject__header__menu-filter'), subjectTitle && (0, _core.jsx)(_button["default"], {
     onClick: function onClick() {
       return setSelectedMenu(MENU_CURRENT_SUBJECT);
     },
@@ -328,11 +331,11 @@ exports.TopicMenu = TopicMenu;
 TopicMenu.propTypes = {
   topics: _propTypes["default"].arrayOf(_shapes.TopicShape).isRequired,
   toFrontpage: _propTypes["default"].func.isRequired,
-  toTopic: _propTypes["default"].func.isRequired,
-  toSubject: _propTypes["default"].func.isRequired,
+  toTopic: _propTypes["default"].func,
+  toSubject: _propTypes["default"].func,
   close: _propTypes["default"].func,
   defaultCount: _propTypes["default"].number,
-  subjectTitle: _propTypes["default"].string.isRequired,
+  subjectTitle: _propTypes["default"].string,
   resourceToLinkProps: _propTypes["default"].func.isRequired,
   onNavigate: _propTypes["default"].func.isRequired,
   expandedTopicId: _propTypes["default"].string,
@@ -364,7 +367,8 @@ TopicMenu.propTypes = {
       }))
     })).isRequired,
     selectedGradeIndex: _propTypes["default"].number
-  })
+  }),
+  initialSelectedMenu: _propTypes["default"].oneOf([MENU_CURRENT_SUBJECT, MENU_CURRENT_PROGRAMME, MENU_PROGRAMMES, MENU_ALL_SUBJECTS])
 };
 TopicMenu.defaultProps = {
   defaultCount: 12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "2.1.1",
+  "version": "2.1.5",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.0.1",
-    "@ndla/carousel": "^1.0.1",
-    "@ndla/core": "^0.7.1",
-    "@ndla/hooks": "^1.0.2",
+    "@ndla/button": "^1.0.2",
+    "@ndla/carousel": "^1.0.2",
+    "@ndla/core": "^0.7.2",
+    "@ndla/hooks": "^1.0.3",
     "@ndla/icons": "^1.0.1",
-    "@ndla/licenses": "^1.0.1",
-    "@ndla/modal": "^1.1.3",
+    "@ndla/licenses": "^1.0.2",
+    "@ndla/modal": "^1.1.5",
     "@ndla/safelink": "^1.0.1",
-    "@ndla/switch": "^0.0.31",
-    "@ndla/tabs": "^1.0.3",
-    "@ndla/tooltip": "^0.2.43",
-    "@ndla/util": "^1.0.2",
+    "@ndla/switch": "^0.0.32",
+    "@ndla/tabs": "^1.0.5",
+    "@ndla/tooltip": "^0.2.44",
+    "@ndla/util": "^1.0.3",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "936571e63638860734209e0ed83fb62e23efe016"
+  "gitHead": "e10a8348999df08fd71cc4959e873252395bfea9"
 }

package/src/Article/Article.tsx

@@ -143,7 +143,7 @@ export const Article = ({
   const [articleRef, { entry }] = useIntersectionObserver({
     root: null,
     rootMargin: '400px',
-    threshold: 0.25,
+    threshold: 0.1,
   });
   const [articlePositionRight, setArticlePositionRight] = useState(0);
   const wrapperRef = useRef<HTMLDivElement>(null);

package/src/AudioPlayer/initAudioPlayers.tsx

@@ -10,7 +10,6 @@ import ReactDOM from 'react-dom';
 
 import Controls from './Controls';
 import SpeechControl from './SpeechControl';
-import LocaleProvider from '../locale/LocaleProvider';
 import { Locale } from '../types';
 import { truncateDescription } from './AudioPlayer';
 
@@ -28,14 +27,9 @@ const initAudioPlayers = (locale: Locale) => {
     const speech = el.getAttribute('data-speech');
     if (src && title) {
       if (speech) {
-        ReactDOM.render(<SpeechControl src={src} title={title} />, el);
+        ReactDOM.hydrate(<SpeechControl src={src} title={title} />, el);
       } else {
-        ReactDOM.render(
-          <LocaleProvider locale={locale}>
-            <Controls src={src} title={title} />
-          </LocaleProvider>,
-          el,
-        );
+        ReactDOM.hydrate(<Controls src={src} title={title} />, el);
       }
     }
   });

package/src/ErrorMessage/ErrorMessage.tsx

@@ -45,8 +45,8 @@ interface Props {
     title: string;
     description?: string;
     linksTitle?: string;
-    back: string;
-    goToFrontPage: string;
+    back?: string;
+    goToFrontPage?: string;
   };
   illustration?: {
     url: string;

package/src/Topic/Topic.tsx

@@ -70,6 +70,7 @@ const ShowVisualElementWrapper = styled.div`
   width: 100%;
   height: 100%;
   overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
 `;
 
 const VisualElementButton = styled(Button)`
@@ -81,7 +82,7 @@ const VisualElementButton = styled(Button)`
 const TopicHeaderImage = styled.img`
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: none;
   transition: transform ${animations.durations.fast};
   ${VisualElementButton}:hover & {
     transform: scale(1.1);
@@ -95,7 +96,6 @@ const ExpandVisualElementButton = styled.span`
   bottom: -4px;
   transition: all ${animations.durations.fast};
   ${VisualElementButton}:hover & {
-    color: ${colors.brand.primary};
     right: 10px;
   }
   ${mq.range({ from: breakpoints.mobileWide })} {
@@ -262,14 +262,14 @@ const Topic = ({
                 <TopicHeaderVisualElementWrapper>
                   {topic.visualElement ? (
                     <>
-                      <ShowVisualElementWrapper>
-                        <Modal
-                          activateButton={
-                            <VisualElementButton
-                              stripped
-                              title={
-                                topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')
-                              }>
+                      <Modal
+                        activateButton={
+                          <VisualElementButton
+                            stripped
+                            title={
+                              topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')
+                            }>
+                            <ShowVisualElementWrapper>
                               <TopicHeaderImage
                                 src={`${topic.image.url}?${makeSrcQueryString(
                                   400,
@@ -281,35 +281,35 @@ const Topic = ({
                                 focalPoint={topic.image.focalPoint}
                               />
                               <TopicHeaderOverlay />
-                              <ExpandVisualElementButton>
-                                {topic.visualElement.type === 'image' && (
-                                  <ExpandTwoArrows style={{ width: '24px', height: '24px' }} />
-                                )}
-                                {topic.visualElement.type === 'video' && (
-                                  <PlayCircleFilled style={{ width: '24px', height: '24px' }} />
-                                )}
-                                {topic.visualElement.type === 'other' && (
-                                  <CursorClick style={{ width: '24px', height: '24px' }} />
-                                )}
-                              </ExpandVisualElementButton>
-                            </VisualElementButton>
-                          }
-                          animation="subtle"
-                          animationDuration={50}
-                          backgroundColor="white"
-                          size="large">
-                          {(onClose: () => void) => (
-                            <>
-                              <ModalHeader>
-                                <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
-                              </ModalHeader>
-                              <ModalBody modifier="no-side-padding-mobile">
-                                {topic.visualElement && topic.visualElement.element}
-                              </ModalBody>
-                            </>
-                          )}
-                        </Modal>
-                      </ShowVisualElementWrapper>
+                            </ShowVisualElementWrapper>
+                            <ExpandVisualElementButton>
+                              {topic.visualElement.type === 'image' && (
+                                <ExpandTwoArrows style={{ width: '24px', height: '24px' }} />
+                              )}
+                              {topic.visualElement.type === 'video' && (
+                                <PlayCircleFilled style={{ width: '24px', height: '24px' }} />
+                              )}
+                              {topic.visualElement.type === 'other' && (
+                                <CursorClick style={{ width: '24px', height: '24px' }} />
+                              )}
+                            </ExpandVisualElementButton>
+                          </VisualElementButton>
+                        }
+                        animation="subtle"
+                        animationDuration={50}
+                        backgroundColor="white"
+                        size="large">
+                        {(onClose: () => void) => (
+                          <>
+                            <ModalHeader>
+                              <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
+                            </ModalHeader>
+                            <ModalBody modifier="no-side-padding-mobile">
+                              {topic.visualElement && topic.visualElement.element}
+                            </ModalBody>
+                          </>
+                        )}
+                      </Modal>
                     </>
                   ) : (
                     <TopicHeaderImage

package/src/TopicMenu/TopicMenu.jsx

@@ -71,10 +71,11 @@ export const TopicMenu = ({
   subjectCategories,
   programmes,
   currentProgramme,
+  initialSelectedMenu,
 }) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-  const [selectedMenu, setSelectedMenu] = useState(MENU_CURRENT_SUBJECT);
+  const [selectedMenu, setSelectedMenu] = useState(() => initialSelectedMenu || MENU_CURRENT_SUBJECT);
 
   useEffect(() => {
     const setScreenSize = (initial = false) => {
@@ -178,13 +179,15 @@ export const TopicMenu = ({
         <div {...classes('subject')}>
           <div {...classes('subject__header')}>
             <div {...classes('subject__header__menu-filter')}>
-              <Button
-                onClick={() => setSelectedMenu(MENU_CURRENT_SUBJECT)}
-                lighter={selectedMenu !== MENU_CURRENT_SUBJECT}
-                size="small"
-                borderShape="rounded">
-                {subjectTitle}
-              </Button>
+              {subjectTitle && (
+                <Button
+                  onClick={() => setSelectedMenu(MENU_CURRENT_SUBJECT)}
+                  lighter={selectedMenu !== MENU_CURRENT_SUBJECT}
+                  size="small"
+                  borderShape="rounded">
+                  {subjectTitle}
+                </Button>
+              )}
               {currentProgramme && (
                 <Button
                   onClick={() => setSelectedMenu(MENU_CURRENT_PROGRAMME)}
@@ -346,11 +349,11 @@ export const TopicMenu = ({
 TopicMenu.propTypes = {
   topics: PropTypes.arrayOf(TopicShape).isRequired,
   toFrontpage: PropTypes.func.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  toSubject: PropTypes.func.isRequired,
+  toTopic: PropTypes.func,
+  toSubject: PropTypes.func,
   close: PropTypes.func,
   defaultCount: PropTypes.number,
-  subjectTitle: PropTypes.string.isRequired,
+  subjectTitle: PropTypes.string,
   resourceToLinkProps: PropTypes.func.isRequired,
   onNavigate: PropTypes.func.isRequired,
   expandedTopicId: PropTypes.string,
@@ -395,6 +398,12 @@ TopicMenu.propTypes = {
     ).isRequired,
     selectedGradeIndex: PropTypes.number,
   }),
+  initialSelectedMenu: PropTypes.oneOf([
+    MENU_CURRENT_SUBJECT,
+    MENU_CURRENT_PROGRAMME,
+    MENU_PROGRAMMES,
+    MENU_ALL_SUBJECTS,
+  ]),
 };
 
 TopicMenu.defaultProps = {