@ndla/ui 25.0.2 → 25.2.1

package/src/LanguageSelector/LanguageSelector.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import FocusTrapReact from 'focus-trap-react';
-import Button, { appearances } from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
@@ -95,12 +95,6 @@ const StyledSpan = styled.span`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const styledInvertedOutlineLargeScreensOnly = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${appearances.ghostPillOutlineInverted}
-  }
-`;
-
 type Props = {
   options: {
     [key: string]: {
@@ -116,31 +110,35 @@ type Props = {
   alwaysVisible?: boolean;
 };
 
-const LanguageSelector = ({
-  currentLanguage,
-  outline,
-  center,
-  inverted,
-  invertedOutlineLargeScreensOnly,
-  alwaysVisible,
-}: Props) => {
+interface StyledButtonProps {
+  outline?: boolean;
+  inverted?: boolean;
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+  border-color: ${({ inverted, outline }) =>
+    outline ? (inverted ? colors.white : colors.brand.primary) : 'transparent'};
+`;
+
+const LanguageSelector = ({ currentLanguage, outline, center, inverted, alwaysVisible }: Props) => {
   const { t, i18n } = useTranslation();
   const [infoLocale, setInfoLocale] = useState(i18n.language);
   const [isOpen, setIsOpen] = useState(false);
   return (
     <StyledWrapper alwaysVisible={alwaysVisible}>
-      <Button
-        ghostPillOutline={outline && !inverted}
-        ghostPill={!outline && !inverted}
-        ghostPillOutlineInverted={outline && inverted}
-        ghostPillInverted={!outline && inverted}
-        css={invertedOutlineLargeScreensOnly && styledInvertedOutlineLargeScreensOnly}
+      <StyledButton
+        outline={outline}
+        inverted={inverted}
+        shape="pill"
+        size="medium"
+        colorTheme="lighter"
+        variant="ghost"
         onClick={() => setIsOpen(true)}>
         <StyledSpan>
           {t(`languages.prefixChangeLanguage`)}: {t(`languages.${infoLocale}`)}
         </StyledSpan>
         <ChevronDown />
-      </Button>
+      </StyledButton>
       {isOpen && (
         <FocusTrapReact
           active
@@ -153,7 +151,7 @@ const LanguageSelector = ({
           }}>
           <StyledModal animateIn={isOpen} centered={center}>
             <Button
-              link
+              variant="link"
               onClick={() => {
                 setIsOpen(false);
               }}>

package/src/Masthead/Masthead.tsx

@@ -21,6 +21,7 @@ interface MastheadItemProps {
 
 const LeftMastheadItem = styled.div`
   display: flex;
+  align-items: center;
   button {
     white-space: nowrap;
   }
@@ -35,6 +36,7 @@ const LeftMastheadItem = styled.div`
 
 const RightMastheadItem = styled.div`
   display: flex;
+  gap: ${spacing.small};
   align-items: center;
   justify-content: flex-end;
   ${mq.range({ from: breakpoints.tablet })} {

package/src/Masthead/MastheadAuthModal.tsx

@@ -8,9 +8,9 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
-import { colors, fonts, spacing } from '@ndla/core';
+import { colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 
 import AuthModal, { AuthModalProps } from '../User/AuthModal';
@@ -20,20 +20,15 @@ type FeideWrapperProps = {
 };
 
 const StyledButton = styled(Button)<FeideWrapperProps>`
-  font-weight: ${fonts.weight.semibold};
-  display: flex;
-  align-items: center;
-  .feide-icon svg {
+  svg {
     margin-left: ${spacing.xsmall};
-    fill: ${colors.brand.primary};
-    color: ${(props) => (props.inverted ? `#ffffff` : `#000000`)};
+    color: ${(props) => (props.inverted ? colors.white : colors.brand.primary)};
     width: 22px;
     height: 22px;
   }
-  &:hover {
-    .feide-icon svg {
-      color: #000000;
-    }
+  &:hover svg,
+  &:focus svg {
+    color: ${colors.brand.primary};
   }
 `;
 
@@ -43,15 +38,20 @@ interface Props extends AuthModalProps {
 
 const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
   const { t } = useTranslation();
+
   return (
     <AuthModal
       {...rest}
       activateButton={
-        <StyledButton inverted={inverted} ghostPill={!inverted} ghostPillInverted={inverted} aria-label="Feide">
+        <StyledButton
+          inverted={inverted}
+          shape="pill"
+          size="medium"
+          colorTheme="lighter"
+          variant="ghost"
+          aria-label={t('user.buttonLogIn')}>
           {t('myNdla.myNDLA')}
-          <span className="feide-icon">
-            <Feide />
-          </span>
+          <Feide />
         </StyledButton>
       }
     />

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import Modal from '@ndla/modal';
-import Button from '@ndla/button';
+import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
@@ -17,6 +17,9 @@ interface Props {
 }
 
 const StyledHeader = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  align-items: center;
   ${mq.range({ from: breakpoints.tablet })} {
     width: 1024px;
     max-width: calc(100vw - 100px);
@@ -50,26 +53,6 @@ const StyledHeader = styled.div`
       }
     }
   }
-  > button {
-    width: ${spacing.large};
-    height: 48px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      transform: translate(${spacing.large}, 0);
-      width: ${spacing.large};
-      height: 56px;
-      &:hover,
-      &:focus {
-        transform: translate(calc(${spacing.large} + 1px), 1px);
-      }
-    }
-    ${mq.range({ from: breakpoints.wide })} {
-      transform: translate(${spacing.large}, 0);
-      &:hover,
-      &:focus {
-        transform: translate(calc(${spacing.large} + 1px), 1px);
-      }
-    }
-  }
 `;
 
 const modalStyles = css`
@@ -133,9 +116,9 @@ const MastheadSearchModal = ({
         <div css={extraBackdrop} />
         <StyledHeader>
           {isFunction(children) ? children(closeModal) : children}
-          <Button stripped onClick={closeModal}>
+          <IconButton aria-label={t('welcomePage.closeSearch')} variant="ghost" colorTheme="light" onClick={closeModal}>
             <Cross className="c-icon--medium" />
-          </Button>
+          </IconButton>
         </StyledHeader>
       </>
     )}

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
@@ -67,7 +67,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h1>{aboutNDLAVideo.title}</h1>
           <p>{aboutNDLAVideo.description}</p>
-          <Modal size="fullscreen" activateButton={<Button link>{t('ndlaFilm.about.more')}</Button>}>
+          <Modal size="fullscreen" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
             {(onClose) => (
               <OneColumn cssModifier="medium">
                 <ModalHeader>

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -127,6 +127,8 @@ const SlideshowLink = styled(SafeLink)<SlideshowLinkProps>`
 `;
 
 const SlideshowWrapper = styled.section`
+  width: 100%;
+  overflow: hidden;
   &:hover {
     ${StyledNavigationArrow} {
       opacity: 1;

package/src/NDLAFilm/NavigationArrow.tsx

@@ -48,10 +48,10 @@ export const StyledNavigationArrow = styled.div<StyledNavigationArrowProps>`
   transform: translate(${spacing.xsmall}, 0);
   ${(props) =>
     props.right &&
-    `
-    right: 0;
-    transform: translate(${spacing.xsmall}, 0);
-  `}
+    css`
+      right: 0;
+      transform: translate(-${spacing.xsmall}, 0);
+    `}
 `;
 
 const NavigationArrowButton = styled.button`

package/src/Navigation/NavigationHeading.tsx

@@ -45,10 +45,11 @@ type Props = {
   subHeading?: string;
   children: ReactNode;
   invertedStyle?: boolean;
+  headingId?: string;
 };
 
-export const NavigationHeading = ({ subHeading, children, invertedStyle }: Props) => (
-  <StyledH1 invertedStyle={invertedStyle}>
+export const NavigationHeading = ({ subHeading, children, invertedStyle, headingId }: Props) => (
+  <StyledH1 invertedStyle={invertedStyle} id={headingId} tabIndex={-1}>
     {subHeading && <StyledSubText>{subHeading}</StyledSubText>}
     <StyledMainText>{children}</StyledMainText>
   </StyledH1>

package/src/Navigation/NavigationTopicAbout.tsx

@@ -146,6 +146,7 @@ export const NavigationTopicAbout = ({
             {parse(renderMarkdown(introduction))}
             <StyledButtonWrapper invertedStyle={invertedStyle}>
               <Button
+                aria-expanded={!!showContent}
                 link
                 onClick={() => {
                   onToggleShowContent();

package/src/Notion/FigureNotion.tsx

@@ -30,6 +30,7 @@ interface Props {
   hideFigCaption?: boolean;
   hideIconsAndAuthors?: boolean;
   figureType?: FigureType;
+  licenseButtons?: ReactNode;
 }
 
 const FigureNotion = ({
@@ -44,6 +45,7 @@ const FigureNotion = ({
   hideFigCaption,
   hideIconsAndAuthors,
   figureType,
+  licenseButtons,
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
@@ -84,8 +86,9 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}
-              />
+                }}>
+                {licenseButtons}
+              </FigureLicenseDialog>
             </FigureCaption>
           ) : (
             <BottomBorder />

package/src/Notion/NotionVisualElement.tsx

@@ -30,6 +30,7 @@ export type NotionVisualElementType = {
     src: string;
     alt?: string;
   };
+  licenseButtons?: ReactNode;
 };
 
 interface Props {
@@ -64,6 +65,7 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       title={visualElement.title ?? ''}
       copyright={visualElement.copyright}
       licenseString={visualElement.copyright?.license?.license ?? ''}
+      licenseButtons={visualElement.licenseButtons}
       type={type}>
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />

package/src/Programme/Programme.tsx

@@ -65,9 +65,18 @@ type Props = GradesProps & {
   heading?: string;
   image?: string;
   messageBoxText?: string;
+  headingId?: string;
 };
 
-export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade, messageBoxText }: Props) => {
+export const Programme = ({
+  heading,
+  image,
+  grades,
+  selectedGrade,
+  onChangeGrade,
+  messageBoxText,
+  headingId,
+}: Props) => {
   const { t } = useTranslation();
   return (
     <StyledWrapper>
@@ -76,7 +85,7 @@ export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade
         <StyledLayoutWrapper>
           <LayoutItem layout="extend">
             <StyledContentWrapper>
-              <NavigationHeading>{heading}</NavigationHeading>
+              <NavigationHeading headingId={headingId}>{heading}</NavigationHeading>
               {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
                 <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />

package/src/ResourceGroup/ResourceItem.tsx

@@ -284,19 +284,28 @@ const ResourceItem = ({
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === 'teacher' && (
           <Tooltip tooltip={t('article.access.onlyTeacher')}>
-            <HumanMaleBoard className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+            <HumanMaleBoard
+              className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+              aria-label={t('article.access.onlyTeacher')}
+            />
           </Tooltip>
         )}
         {showAdditionalResources && contentTypeDescription && (
           <>
             {additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Additional className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+                <Additional
+                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                  aria-label={contentTypeDescription}
+                />
               </Tooltip>
             )}
             {!additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Core className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+                <Core
+                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                  aria-label={contentTypeDescription}
+                />
               </Tooltip>
             )}
           </>

package/src/Search/SearchField.tsx

@@ -139,7 +139,12 @@ const SearchField = ({
           {t('welcomePage.resetSearch')}
         </button>
       )}
-      <button tabIndex={-1} {...classes('button', 'searchIcon')} type="submit" value="Search">
+      <button
+        tabIndex={-1}
+        {...classes('button', 'searchIcon')}
+        type="submit"
+        value="Search"
+        aria-label={t('siteNav.search')}>
         <SearchIcon />
       </button>
     </div>

package/src/Search/SearchFieldForm.tsx

@@ -58,7 +58,7 @@ const StyledForm = styled.form<StyledProps>`
 
 export const SearchFieldForm = ({ children, inputHasFocus, onSubmit }: Props) => {
   return (
-    <StyledForm action="/search/" inputHasFocus={inputHasFocus} onSubmit={onSubmit}>
+    <StyledForm role="search" action="/search/" inputHasFocus={inputHasFocus} onSubmit={onSubmit}>
       {children}
     </StyledForm>
   );

package/src/Search/ToggleSearchButton.tsx

@@ -32,7 +32,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   color: ${(p) => (p.ndlaFilm ? '#fff' : colors.brand.primary)};
   padding: ${spacing.small} ${spacingUnit * 0.75}px ${spacing.small} ${spacing.normal};
   align-items: center;
-  margin-left: ${spacing.normal};
+  margin-left: ${spacing.medium};
 
   .c-icon {
     height: 24px;
@@ -43,7 +43,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 
   ${mq.range({ from: breakpoints.desktop })} {
     display: ${(p) => (p.hideOnWideScreen ? 'none' : 'flex')};
-    margin-right: ${spacing.medium};
+    margin-right: ${spacing.nsmall};
     padding: ${spacing.small} ${spacing.normal};
   }
   &:hover,

package/src/SectionHeading/SectionHeading.tsx

@@ -26,7 +26,7 @@ const StyledWrapper = styled.h2<StyledWrapperProps>`
     `};
 `;
 
-const LargeStyledWrapper = StyledWrapper.withComponent('h2');
+const LargeStyledWrapper = StyledWrapper.withComponent('h1');
 
 interface Props {
   children: ReactNode;
@@ -36,7 +36,11 @@ interface Props {
 
 const SectionHeading = ({ children, large = false, className }: Props) => {
   const Wrapper: ElementType = large ? LargeStyledWrapper : StyledWrapper;
-  return <Wrapper className={className}>{children}</Wrapper>;
+  return (
+    <Wrapper large={large} className={className}>
+      {children}
+    </Wrapper>
+  );
 };
 
 export default SectionHeading;