Podcast player

package.json

@@ -71,7 +71,7 @@
     "concurrently": "^4.1.0",
     "cross-env": "^5.1.3",
     "cross-spawn": "^6.0.4",
-    "eslint": "^5.13.0",
+    "eslint": "^7.18.0",
     "jest": "^24.1.0",
     "jest-dom": "^3.1.1",
     "jest-emotion": "^10.0.9",
@@ -100,6 +100,6 @@
     "string-length": "^2.0.0",
     "style-loader": "^0.23.1",
     "ts-jest": "^24.0.0",
-    "typescript": "3.5.x"
+    "typescript": "^4.1.3"
   }
 }

packages/core/scss/global/settings/settings.global.scss

@@ -20,4 +20,10 @@ $font-weight-bold: 700;
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
+  /**
+   * Remove reach-warning about not including reach-css
+   */
+  --reach-dialog: 1;
+  --reach-menu-button: 1;
+  --reach-slider: 1;
 }

packages/core/src/animations.ts

@@ -2,7 +2,7 @@ import spacing from './spacing';
 
 const DURATION_DEFAULT = '400ms';
 
-export default {
+const animations = {
   durations: {
     superFast: '100ms',
     fast: '200ms',
@@ -177,3 +177,5 @@ export default {
       }
   `,
 };
+
+export default animations;

packages/core/src/colors.ts

@@ -8,7 +8,7 @@ const brandGreyLight = '#e8e3e3';
 const brandGreyLightest = '#f8f8f8';
 const brandYellow = '#fde74c';
 
-export default {
+const colors = {
   /**
    * NDLA Brand colors
    */
@@ -132,3 +132,5 @@ export default {
     grayDark: '#e4e4e4',
   },
 };
+
+export default colors;

packages/core/src/fonts.ts

@@ -19,7 +19,7 @@ function sizes(fontSize: string | number, lineHeight?: string | number) {
   return `${fontSizeStyling} line-height: ${defaultLineHeight}`;
 }
 
-export default {
+const fonts = {
   sans:
     "'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif",
   serif:
@@ -32,3 +32,5 @@ export default {
   },
   sizes,
 };
+
+export default fonts;

packages/core/src/misc.ts

@@ -1,4 +1,4 @@
-export default {
+const misc = {
   maxTextWidth: '700px',
   borderRadius: '4px',
   borderRadiusLarge: '50%',
@@ -10,3 +10,5 @@ export default {
   },
   textLinkBoxShadow: 'inset 0 -1px',
 };
+
+export default misc;

packages/core/src/mq.ts

@@ -1,7 +1,7 @@
 import facepaint from 'facepaint';
 import breakpoints from './breakpoints';
 
-export default {
+const mq = {
   tablet: facepaint([`@media (min-width: ${breakpoints.tablet})`]),
   desktop: facepaint([`@media (min-width: ${breakpoints.desktop})`]),
   mobile: facepaint([`@media (min-width: ${breakpoints.mobile})`]),
@@ -10,3 +10,5 @@ export default {
       from && until ? ' and ' : ''
     }${!from && until ? '@media ' : ''}${until ? `(max-width: ${until})` : ''}`,
 };
+
+export default mq;

packages/core/src/shadows.ts

@@ -1,4 +1,6 @@
-export default {
+const shadows = {
   searchHeader: '0 0 30px rgba(39,39,40, .2)',
   levitate1: '0 0 19px rgba(0, 0, 0, 0.2)',
 };
+
+export default shadows;

packages/core/src/spacing.ts

@@ -1,6 +1,6 @@
 const spacingUnit = 26;
 
-export default {
+const spacing = {
   xxsmall: `${spacingUnit / 6}px`,
   xsmall: `${spacingUnit / 4}px`,
   small: `${spacingUnit / 2}px`,
@@ -9,3 +9,4 @@ export default {
   large: `${spacingUnit * 2}px`,
   spacingUnit,
 };
+export default spacing;

packages/core/src/typography.ts

@@ -27,8 +27,10 @@ const mediumHeaderUppercase = css`
   ${fonts.sizes(20, 1.1)};
 `;
 
-export default {
+const typography = {
   smallHeading,
   smallerHeadingUppercase,
   mediumHeaderUppercase,
 };
+
+export default typography;

packages/core/src/utils.ts

@@ -1,6 +1,8 @@
-export default {
+const utils = {
   restoreOutline: `
     outline: 1px dotted #212121;
     outline: -webkit-focus-ring-color auto 5px;
 `,
 };
+
+export default utils;

packages/designmanual/dummydata/mockEditorState.js

@@ -21,7 +21,7 @@ export const subjectList = [
   },
 ];
 
-export default {
+const editorState = {
   entityMap: {
     0: {
       type: 'image',
@@ -88,3 +88,5 @@ export default {
     },
   ],
 };
+
+export default editorState;

packages/designmanual/images/banners/index.js

@@ -42,7 +42,7 @@ import Biologi1 from './Biologi-1.svg';
 import ReligionOgEtikk from './Religion-og-Etikk.svg';
 import SosiologiOgSosialantropologi from './Sosiologi-og-Sosialantropologi.svg';
 
-export default [
+const banners = [
   { desktop: Biologi1, mobile: Biologi1, name: 'Biologi 1' },
   {
     desktop: ReligionOgEtikk,
@@ -211,3 +211,5 @@ export default [
     name: 'Norsk',
   },
 ];
+
+export default banners;

packages/designmanual/images/h5p-contenttype/index.js

@@ -14,7 +14,7 @@ import imageHotspot from './image-hotspots-icon-color.png';
 import imageHotspotQuestion from './image_hotspot-question-icon_0.png';
 import iframe from './iframe_embeddor_icon-color_0.png';
 
-export default [
+const h5pContentTypes = [
   {
     id: 'othercontent-id-1',
     description: 'Regler for bruk av fyll ut',
@@ -120,3 +120,5 @@ export default [
     url: 'https://h5p.org/',
   },
 ];
+
+export default h5pContentTypes;

packages/designmanual/stories/article/AudioAdvancedExample.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { AudioPlayer, Figure } from '@ndla/ui';
+import { initArticleScripts } from '@ndla/article-scripts';
+import { uuid } from '@ndla/util';
+import { injectT } from '@ndla/i18n';
+import FigureCaptionExample from './FigureCaptionExample';
+import { useRunOnlyOnce } from './useRunOnlyOnce';
+
+const AudioAdvancedExample = ({ t }) => {
+  const id = useRunOnlyOnce(uuid(), () => {
+    initArticleScripts();
+  });
+
+  const messages = {
+    rulesForUse: t('license.audio.rules'),
+    reuse: t('audio.reuse'),
+    download: t('audio.download'),
+  };
+
+  const figureId = `figure-${id}`;
+
+  const description =
+    'Se gjerne nærmere på hvordan andre kjente fortellere griper saken an. Siri Knudsen i NRK P3 lot seg for eksempel inspirere av Asbjørnsen og Moe da hun jobbet med sin radiodokumentar om artisten Truls Heggero.';
+
+  const TextVersion = (
+    <>
+      <p>
+        So, I had graduated seven years ago from Berkeley with a dual degree in
+        molecular and cell biology and linguistics, and I had gone to a career
+        fair here on campus, where I'd gotten an interview with a start-up
+        called Theranos. And at the time, there wasn't really that much
+        information about the company, but the little that was there was really
+        impressive. Essentially, what the company was doing was creating a
+        medical device where you would be able to run your entire blood panel on
+        a finger-stick of blood. So you wouldn't have to get a big needle stuck
+        in your arm in order to get your blood test done. So this was
+        interesting not only because it was less painful,
+      </p>
+      <p>
+        And this was confirmed in an interview that the founder, Elizabeth
+        Holmes, had said in the Wall Street Journal. "The reality within our
+        health-care system today is that when someone you care about gets really
+        sick, by the time you find out it's [most often] too late to do anything
+        about it, It's heartbreaking." This was a moon shot that I really wanted
+        to be a part of and I really wanted to help build.{' '}
+      </p>
+    </>
+  );
+  return (
+    <Figure id={figureId} type="full-column">
+      <AudioPlayer
+        src="https://staging.api.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3"
+        title="Den gode lydhistoria"
+        description={description}
+        img={{
+          url: 'https://api.ndla.no/image-api/raw/BagNsXHq.jpg?height=400',
+          alt:
+            'Mann blir målt og observert. Omgitt av ulike diagrammer. Illustrasjon.',
+        }}
+        textVersion={TextVersion}
+      />
+      <FigureCaptionExample figureId={figureId} id={id} messages={messages} />
+    </Figure>
+  );
+};
+
+export default injectT(AudioAdvancedExample);

packages/designmanual/stories/article/useRunOnlyOnce.js

@@ -8,15 +8,15 @@ export function useRunOnlyOnce(id, callback) {
 
   useEffect(() => {
     mountedInstances.push(idRef.current);
+    const index = mountedInstances.indexOf(idRef.current);
     if (mountedInstances.length === 1) {
       callback();
     }
 
     return () => {
-      const index = mountedInstances.indexOf(idRef.current);
       mountedInstances.splice(index, 1);
     };
-  }, []);
+  }, [callback]);
 
   return idRef.current;
 }

packages/designmanual/stories/pages/ArticleAdditional.jsx

@@ -25,7 +25,7 @@ import ArticleBylineExample from '../molecules/ArticleBylineExample';
 
 const { contentTypes } = constants;
 
-export default () => (
+const ArticleAdditional = () => (
   <OneColumn>
     <ArticleWrapper id="mainContentId" modifier={contentTypes.SUBJECT_MATERIAL}>
       <LayoutItem layout="center">
@@ -227,3 +227,5 @@ export default () => (
     </LayoutItem>
   </OneColumn>
 );
+
+export default ArticleAdditional;

packages/designmanual/stories/pages/ArticleAssessmentResource.jsx

@@ -26,7 +26,7 @@ import FigureImage from '../article/FigureImage';
 
 const { contentTypes } = constants;
 
-export default () => (
+const ArticleAssessmentResource = () => (
   <OneColumn cssModifier="narrow">
     <ArticleWrapper
       id="mainContentId"
@@ -92,3 +92,5 @@ export default () => (
     </LayoutItem>
   </OneColumn>
 );
+
+export default ArticleAssessmentResource;

packages/designmanual/stories/pages/ArticleExercise.jsx

@@ -27,7 +27,7 @@ import FigureImage from '../article/FigureImage';
 
 const { contentTypes } = constants;
 
-export default () => (
+const ArticleExercise = () => (
   <OneColumn cssModifier="narrow">
     <ArticleWrapper
       id="mainContentId"
@@ -92,3 +92,5 @@ export default () => (
     </LayoutItem>
   </OneColumn>
 );
+
+export default ArticleExercise;

packages/designmanual/stories/pages/ArticleExternalLearningResource.jsx

@@ -28,7 +28,7 @@ import FigureImage from '../article/FigureImage';
 
 const { contentTypes } = constants;
 
-export default () => (
+const ArticleExternalLearningResource = () => (
   <OneColumn>
     <ArticleWrapper
       id="mainContentId"
@@ -111,3 +111,5 @@ export default () => (
     </LayoutItem>
   </OneColumn>
 );
+
+export default ArticleExternalLearningResource;

packages/designmanual/stories/pages/ArticleLearningPaths.jsx

@@ -20,7 +20,7 @@ import {
 import FigureImage from '../article/FigureImage';
 import ArticleBylineExample from '../molecules/ArticleBylineExample';
 
-export default ({ title, description }) => (
+const ArticleLearningPaths = ({ title, description }) => (
   <>
     <h1>{title}</h1>
     <p>{description}</p>
@@ -80,3 +80,5 @@ export default ({ title, description }) => (
     </OneColumn>
   </>
 );
+
+export default ArticleLearningPaths;

packages/designmanual/stories/pages/ArticleSourceMaterial.jsx

@@ -28,7 +28,7 @@ import ArticleBylineExample from '../molecules/ArticleBylineExample';
 
 const { contentTypes } = constants;
 
-export default () => (
+const ArticleSourceMaterial = () => (
   <OneColumn>
     <ArticleWrapper id="mainContentId" modifier={contentTypes.SOURCE_MATERIAL}>
       <LayoutItem layout="center">
@@ -111,3 +111,5 @@ export default () => (
     </LayoutItem>
   </OneColumn>
 );
+
+export default ArticleSourceMaterial;