@ndla/ui 34.6.6 → 35.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.6.6",
+  "version": "35.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.15",
-    "@ndla/button": "^9.1.4",
+    "@ndla/button": "^10.0.0",
     "@ndla/carousel": "^3.0.3",
     "@ndla/core": "^3.1.2",
-    "@ndla/forms": "^4.2.7",
+    "@ndla/forms": "^4.2.8",
     "@ndla/hooks": "^2.0.2",
     "@ndla/icons": "^2.2.3",
     "@ndla/licenses": "^7.0.1",
     "@ndla/modal": "^2.2.7",
-    "@ndla/notion": "^4.2.4",
-    "@ndla/safelink": "^4.0.9",
+    "@ndla/notion": "^4.2.5",
+    "@ndla/safelink": "^4.0.10",
     "@ndla/switch": "^1.0.7",
     "@ndla/tabs": "^2.1.8",
     "@ndla/tooltip": "^4.0.10",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "662adf62096bf0099d342cf51f13060da39ff2bb"
+  "gitHead": "908efc9af085f4cd4ef3533250956ab2c66cb570"
 }

package/src/Embed/BrightcoveEmbed.tsx

@@ -69,6 +69,8 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
     if (iframe) {
       const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width}/${height}`;
+      iframe.width = '';
+      iframe.height = '';
     }
   }, []);
   if (embed.status === 'error') {

package/src/Embed/ExternalEmbed.tsx

@@ -34,6 +34,8 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
     if (iframe) {
       const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
+      iframe.width = '';
+      iframe.height = '';
     }
   }, []);
   if (embed.status === 'error') {

package/src/Embed/H5pEmbed.tsx

@@ -8,7 +8,7 @@
 
 import styled from '@emotion/styled';
 import { H5pMetaData } from '@ndla/types-embed';
-import { useEffect, useRef } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { errorSvgSrc } from './ImageEmbed';
 
@@ -26,18 +26,6 @@ const StyledFigure = styled.figure`
 const H5pEmbed = ({ embed, isConcept }: Props) => {
   const { t } = useTranslation();
 
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const figRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const iframe =
-      embed.status === 'success' && embed.data.oembed ? figRef.current?.querySelector('iframe') : iframeRef.current;
-    if (iframe) {
-      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-    }
-  }, [embed]);
-
   if (embed.status === 'error') {
     return (
       <figure className={isConcept ? '' : 'c-figure'}>
@@ -50,23 +38,12 @@ const H5pEmbed = ({ embed, isConcept }: Props) => {
   const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   if (embed.data.oembed) {
-    return (
-      <StyledFigure
-        className={classes}
-        ref={figRef}
-        //@ts-ignore
-        // eslint-disable-next-line react/no-unknown-property
-        resizeiframe="true"
-        dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }}
-      />
-    );
+    return <StyledFigure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
   }
 
   return (
-    //@ts-ignore
-    // eslint-disable-next-line react/no-unknown-property
-    <StyledFigure className={classes} resizeiframe="true">
-      <iframe title={embed.embedData.url} ref={iframeRef} aria-label={embed.embedData.url} src={embed.embedData.url} />
+    <StyledFigure className={classes}>
+      <iframe title={embed.embedData.url} aria-label={embed.embedData.url} src={embed.embedData.url} />
     </StyledFigure>
   );
 };

package/src/Embed/IframeEmbed.tsx

@@ -29,6 +29,8 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
     if (iframe) {
       const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
+      iframe.width = '';
+      iframe.height = '';
     }
   }, []);
 

package/src/Embed/conceptComponents.tsx

@@ -255,6 +255,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       if (iframe) {
         const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
         iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
+        iframe.width = '';
+        iframe.height = '';
       }
     }, []);
 

package/src/SearchTypeResult/SearchHeader.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
+import { Spinner } from '@ndla/icons';
 
 import SearchFieldHeader from './SearchFieldHeader';
 import { CompetenceGoalsItemType } from '../types';
@@ -71,6 +72,7 @@ type Props = {
   onSearchValueChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   noResults?: boolean;
+  loading: boolean;
 };
 
 const SearchHeader = ({
@@ -84,6 +86,7 @@ const SearchHeader = ({
   filters,
   competenceGoals,
   noResults,
+  loading,
 }: Props) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState<boolean | undefined>();
@@ -122,12 +125,15 @@ const SearchHeader = ({
         />
       </SearchInputWrapper>
       <PhraseWrapper>
-        {searchPhrase && (
-          <>
-            <PhraseText>{phraseText}</PhraseText>
-            {removeFilterSuggestion && <PhraseText>{removeFilterSuggestion}</PhraseText>}
-          </>
-        )}
+        <div aria-live="assertive">
+          {!loading && searchPhrase && (
+            <>
+              <PhraseText>{phraseText}</PhraseText>
+              <PhraseText>{removeFilterSuggestion}</PhraseText>
+            </>
+          )}
+          {loading && <div aria-label={t('loading')} />}
+        </div>
         {searchPhraseSuggestion && (
           <PhraseSuggestionText>
             {t('searchPage.resultType.searchPhraseSuggestion')}{' '}

package/src/SearchTypeResult/SearchItem.tsx

@@ -43,6 +43,12 @@ const Container = styled.article`
   }
 `;
 
+const ButtonWrapper = styled.div`
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
 const ItemTitle = styled.h3<ItemTypeProps>`
   display: inline;
   ${fonts.sizes('24px', '28px')};
@@ -87,6 +93,10 @@ const ContentWrapper = styled.main`
   padding: ${spacing.small} ${spacing.normal};
 `;
 
+const ButtonContainer = styled.div`
+  z-index: 1;
+`;
+
 export interface SearchItemProps {
   id: string | number;
   title: string;
@@ -105,7 +115,7 @@ export interface SearchItemType {
 }
 
 const SearchItem = ({ item, type }: SearchItemType) => {
-  const { title, url, ingress, contexts = [], img = null, labels = [] } = item;
+  const { title, url, ingress, contexts = [], img = null, labels = [], children } = item;
   const linkRef = useRef<HTMLAnchorElement>(null);
 
   const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
@@ -130,6 +140,7 @@ const SearchItem = ({ item, type }: SearchItemType) => {
         <ItemText isTopic={isTopic}>{parse(ingress)}</ItemText>
         {contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
       </ContentWrapper>
+      <ButtonWrapper>{children}</ButtonWrapper>
     </Container>
   );
 };