@ndla/ui 3.2.6 → 3.3.1

package/lib/locale/messages-en.js

@@ -335,7 +335,7 @@ var messages = _objectSpread(_objectSpread({
     competenceTopicSearchText: 'Find resources',
     competenceSubjectSearchText: 'Go to topic page',
     competenceGoalClose: 'Close',
-    competenceGoalTitle: 'The goal is for the student to be able to:',
+    competenceGoalTitle: 'The pupil is expected to be able to:',
     competenceTabLK06label: 'Competence goal (LK06)',
     competenceTabLK20label: 'Competence goal (LK20)',
     competenceTabCorelabel: 'Core element',
@@ -671,18 +671,18 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Hva skjer med fagfornyelsen på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
       text: 'Aktiviser elevane med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen'
     }
   },
   editor: {

package/lib/locale/messages-nb.js

@@ -671,18 +671,18 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Hva skjer med fagfornyelsen på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
       text: 'Aktiviser elevene med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen'
     }
   },
   editor: {

package/lib/locale/messages-nn.js

@@ -335,7 +335,7 @@ var messages = _objectSpread(_objectSpread({
     competenceTopicSearchText: 'Søk ressursar for tema',
     competenceSubjectSearchText: 'Gå til fagsiden',
     competenceGoalClose: 'Lukk',
-    competenceGoalTitle: 'Målet er at eleven skal kunna:',
+    competenceGoalTitle: 'Målet er at eleven skal kunne:',
     competenceTabLK06label: 'Kompetansemål (LK06)',
     competenceTabLK20label: 'Kompetansemål (LK20)',
     competenceTabCorelabel: 'Kjerneelement',
@@ -671,18 +671,18 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Kva skjer med fagfornyinga på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
       text: 'Aktiviser elevane med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no'
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen'
     }
   },
   editor: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.2.6",
+  "version": "3.3.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,15 +34,15 @@
     "@ndla/button": "^1.1.1",
     "@ndla/carousel": "^1.0.6",
     "@ndla/core": "^0.7.2",
-    "@ndla/hooks": "^1.0.6",
+    "@ndla/hooks": "^1.0.7",
     "@ndla/icons": "^1.3.1",
-    "@ndla/licenses": "^1.0.7",
-    "@ndla/modal": "^1.1.14",
-    "@ndla/safelink": "^1.0.5",
+    "@ndla/licenses": "^1.0.8",
+    "@ndla/modal": "^1.1.15",
+    "@ndla/safelink": "^1.0.6",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.11",
+    "@ndla/tabs": "^1.0.12",
     "@ndla/tooltip": "^0.2.49",
-    "@ndla/util": "^2.0.0",
+    "@ndla/util": "^2.0.1",
     "@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": "92ea83efa493853e12e35826ed69489342676eb1"
+  "gitHead": "2ea6dd8341da40057df18969093c0da56db91473"
 }

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
 import { Link } from '@ndla/icons/common';
@@ -47,9 +47,27 @@ const ContainerDiv = styled.div`
 interface Props {
   title?: string | null;
   content?: string | null;
+  hydrate?: boolean;
 }
 
-const CopyParagraphButton = ({ title, content }: Props) => {
+interface WrapperProps {
+  title: string;
+  hydrate?: boolean;
+  children: ReactNode;
+}
+
+const WrapperComponent = ({ title, hydrate, children }: WrapperProps) => {
+  if (hydrate) {
+    return <>{children}</>;
+  }
+  return (
+    <ContainerDiv data-header-copy-container data-title={title}>
+      {children}
+    </ContainerDiv>
+  );
+};
+
+const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
   const { t } = useTranslation();
   const [hasCopied, setHasCopied] = useState(false);
   useEffect(() => {
@@ -73,15 +91,16 @@ const CopyParagraphButton = ({ title, content }: Props) => {
 
   const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
   const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+
   return (
-    <ContainerDiv data-header-copy-container data-title={title}>
+    <WrapperComponent hydrate={hydrate} title={title}>
       <IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
         <Tooltip tooltip={tooltip}>
           <Link title={''} />
         </Tooltip>
       </IconButton>
       <h2 id={sanitizedTitle} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }}></h2>
-    </ContainerDiv>
+    </WrapperComponent>
   );
 };
 

package/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -19,8 +19,7 @@ const forEachElement = (selector: string, callback: Function) => {
 const initCopyParagraphButtons = () => {
   forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
     const title = el.getAttribute('data-title');
-    const content = el.innerHTML;
-    ReactDOM.hydrate(<CopyParagraphButton title={title} content={content} />, el);
+    ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate={true} />, el);
   });
 };
 

package/src/Figure/Figure.tsx

@@ -132,10 +132,20 @@ const isFunction = (children: Function | ReactNode): children is Function => {
   return isFunctionHelper(children);
 };
 
+export type FigureType =
+  | 'full'
+  | 'full-column'
+  | 'left'
+  | 'small-left'
+  | 'right'
+  | 'small-right'
+  | 'xsmall-right'
+  | 'xsmall-left';
+
 interface Props {
   id?: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
-  type?: 'full' | 'full-column' | 'left' | 'small-left' | 'right' | 'small-right' | 'xsmall-right' | 'xsmall-left';
+  type?: FigureType;
   resizeIframe?: boolean;
   noFigcaption?: boolean;
 }

package/src/Figure/FigureBylineExpandButton.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
 
 interface Props {
-  children: Element;
   messages: {
     expandBylineButtonLabel: string;
     minimizeBylineButtonLabel: string;
@@ -18,7 +17,7 @@ interface Props {
   typeClass: string;
 }
 
-export const FigureBylineExpandButton = ({ children, messages, typeClass }: Props) => {
+export const FigureBylineExpandButton = ({ messages, typeClass }: Props) => {
   return (
     <button
       className="c-figure__show-byline-btn"

package/src/Figure/index.ts

@@ -11,3 +11,5 @@ export { Figure, FigureCaption };
 export { FigureLicenseDialog } from './FigureLicenseDialog';
 export { FigureExpandButton } from './FigureExpandButton';
 export { FigureBylineExpandButton } from './FigureBylineExpandButton';
+
+export type { FigureType } from './Figure';

package/src/Image/Image.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import defined from 'defined';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
 export interface ImageCrop {
@@ -67,8 +66,8 @@ const Image = ({
   expandButton,
   ...rest
 }: Props) => {
-  const srcSet = defined(rest.srcSet, getSrcSet(src, crop, focalPoint));
-  const fallbackWidth = defined(rest.fallbackWidth, 1024);
+  const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
+  const fallbackWidth = rest.fallbackWidth ?? 1024;
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
 
   if (contentType && contentType === 'image/gif') {

package/src/Table/component.tables.scss

@@ -6,7 +6,7 @@
 
 .c-table {
   $scrollbar-height: 8px;
-  margin: 0;
+  margin: 0 0 $spacing--medium 0;
 
   &::-webkit-scrollbar {
     height: $scrollbar-height;
@@ -84,22 +84,12 @@
 
   &__left-shadow {
     left: 0;
-    background: radial-gradient(
-        ellipse at left,
-        rgba(0, 0, 0, 0.2) 0%,
-        rgba(0, 0, 0, 0) 75%
-      )
-      0 center;
+    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
   }
 
   &__right-shadow {
     right: 0;
-    background: radial-gradient(
-        ellipse at right,
-        rgba(0, 0, 0, 0.2) 0%,
-        rgba(0, 0, 0, 0) 75%
-      )
-      0 center;
+    background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
   }
 }
 

package/src/locale/messages-en.ts

@@ -359,7 +359,7 @@ const messages = {
     competenceTopicSearchText: 'Find resources',
     competenceSubjectSearchText: 'Go to topic page',
     competenceGoalClose: 'Close',
-    competenceGoalTitle: 'The goal is for the student to be able to:',
+    competenceGoalTitle: 'The pupil is expected to be able to:',
     competenceTabLK06label: 'Competence goal (LK06)',
     competenceTabLK20label: 'Competence goal (LK20)',
     competenceTabCorelabel: 'Core element',
@@ -700,18 +700,18 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Hva skjer med fagfornyelsen på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
       text: 'Aktiviser elevane med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen',
     },
   },
   editor: {

package/src/locale/messages-nb.ts

@@ -699,18 +699,18 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Hva skjer med fagfornyelsen på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
       text: 'Aktiviser elevene med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen',
     },
   },
   editor: {

package/src/locale/messages-nn.ts

@@ -359,7 +359,7 @@ const messages = {
     competenceTopicSearchText: 'Søk ressursar for tema',
     competenceSubjectSearchText: 'Gå til fagsiden',
     competenceGoalClose: 'Lukk',
-    competenceGoalTitle: 'Målet er at eleven skal kunna:',
+    competenceGoalTitle: 'Målet er at eleven skal kunne:',
     competenceTabLK06label: 'Kompetansemål (LK06)',
     competenceTabLK20label: 'Kompetansemål (LK20)',
     competenceTabCorelabel: 'Kjerneelement',
@@ -700,18 +700,18 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Kva skjer med fagfornyinga på NDLA?',
-      externalLink: 'https://blogg.ndla.no/2019/11/hva-skjer-med-fagfornyelsen-pa-ndla/',
+      text: 'Nye fag på NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
       text: 'Aktiviser elevane med digitale verktøy',
       externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
-      license: 'CC-BY-NC-SA-4.0',
-      licenseAuthor: 'Scanpix.no',
+      license: 'CC-BY-SA-4.0',
+      licenseAuthor: 'Tom Knudsen',
     },
   },
   editor: {