@ndla/ui 33.3.1 → 33.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "33.3.1",
+  "version": "33.3.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^7.0.4",
+    "@ndla/button": "^7.0.5",
     "@ndla/carousel": "^2.1.1",
     "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.1.8",
+    "@ndla/forms": "^4.1.9",
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.1.1",
     "@ndla/licenses": "^6.1.5",
     "@ndla/modal": "^2.2.2",
-    "@ndla/notion": "^4.1.10",
-    "@ndla/safelink": "^3.1.8",
+    "@ndla/notion": "^4.1.11",
+    "@ndla/safelink": "^4.0.0",
     "@ndla/switch": "^1.0.3",
     "@ndla/tabs": "^2.1.1",
     "@ndla/tooltip": "^4.0.3",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "217305426c45f1512242e45f0c460ef2baea515e"
+  "gitHead": "312f7ebe89fd733409c3d62723cd7209bef67ad6"
 }

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -101,7 +101,7 @@ const FrontpageMultidisciplinarySubject = ({ url, topics, headingLevel }: Props)
         </Content>
       </Wrapper>
       <TargetItem className="o-text-link__wrapper o-text-link__wrapper">
-        <SafeLinkButton to={url} buttonSize="medium" borderShape="rounded">
+        <SafeLinkButton to={url} size="medium" shape="pill">
           {t('frontpageMultidisciplinarySubject.linkText')}
         </SafeLinkButton>
       </TargetItem>

package/src/Frontpage/FrontpageToolbox.tsx

@@ -59,10 +59,10 @@ const FrontpageToolbox = ({ urlStudents, urlTeachers, headingLevel }: Props) =>
       <ToolboxWrapper>
         <StyledText>{t('frontPageToolbox.text')}</StyledText>
       </ToolboxWrapper>
-      <StyledStudentsButton to={urlStudents} buttonSize="medium" borderShape="rounded">
+      <StyledStudentsButton to={urlStudents} size="medium" shape="pill">
         {t('frontPageToolbox.linkTextStudents')}
       </StyledStudentsButton>
-      <SafeLinkButton to={urlTeachers} buttonSize="medium" borderShape="rounded">
+      <SafeLinkButton to={urlTeachers} size="medium" shape="pill">
         {t('frontPageToolbox.linkTextTeachers')}
       </SafeLinkButton>
       <Illustration />

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -123,8 +123,8 @@ const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen
         to={learningPathURL}
         target="_blank"
         rel="noopener noreferrer"
-        outline
-        invertedStyle={invertedStyle}>
+        variant="outline"
+        inverted={invertedStyle}>
         {t('learningPath.createLearningPathButtonText')}
       </StyledSafeLinkButton>
     </StyledAside>

package/src/Navigation/NavigationBox.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, ChangeEventHandler } from 'react';
 import styled from '@emotion/styled';
 import { SafeLinkButton } from '@ndla/safelink';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { css } from '@emotion/react';
 import { Switch } from '@ndla/switch';
@@ -172,6 +172,12 @@ const StyledButtonContentSelected = styled.span`
   margin-left: ${spacing.small};
 `;
 
+const listElementStyle = css`
+  display: flex;
+  flex: 1;
+  text-align: left;
+`;
+
 export type ItemProps = {
   url?: string;
   label: string;
@@ -182,7 +188,7 @@ export type ItemProps = {
 };
 type Props = {
   heading?: string;
-  colorMode?: 'dark' | 'light' | 'greyLightest' | 'greyLighter';
+  colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
   isButtonElements?: boolean;
   items: ItemProps[];
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
@@ -195,7 +201,7 @@ type Props = {
 
 export const NavigationBox = ({
   heading,
-  colorMode = 'dark',
+  colorMode = 'primary',
   items,
   isButtonElements,
   onClick,
@@ -206,7 +212,7 @@ export const NavigationBox = ({
   onToggleAdditionalResources = () => {},
 }: Props) => {
   const { t } = useTranslation();
-  const ListElementType = isButtonElements ? Button : SafeLinkButton;
+  const ListElementType = isButtonElements ? ButtonV2 : SafeLinkButton;
   return (
     <StyledWrapper>
       <StyledHeadingWrapper>
@@ -230,15 +236,10 @@ export const NavigationBox = ({
               selected={item.selected}>
               <ListElementType
                 to={item.url ?? ''}
-                lighter={!item.selected && colorMode === 'light'}
-                greyLighter={!item.selected && colorMode === 'greyLighter'}
-                greyLightest={!item.selected && colorMode === 'greyLightest'}
-                darker={item.selected}
-                buttonSize="medium"
+                colorTheme={item.selected ? 'darker' : colorMode}
                 size="medium"
-                borderShape="sharpened"
-                width="full"
-                textAlign="left"
+                shape="sharp"
+                css={listElementStyle}
                 onClick={(e: MouseEvent<HTMLElement>) => {
                   if (onClick) {
                     onClick(e, item.id);

package/src/Programme/ProgrammeSubjects.tsx

@@ -58,9 +58,9 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
             <li key={item.name}>
               <SafeLinkButton
                 to={current ? '' : item.name.toLowerCase()}
-                lighter={item !== grade}
-                borderShape="rounded"
-                buttonSize="normal"
+                colorTheme={item !== grade ? 'lighter' : undefined}
+                shape="pill"
+                size="normal"
                 aria-current={current}>
                 {item.name}
               </SafeLinkButton>

package/src/ResourceBox/ResourceBox.tsx

@@ -99,8 +99,7 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
       <ContentWrapper>
         <Title>{title}</Title>
         <Caption>{caption}</Caption>
-
-        <StyledButton to={url} target="_blank" outline borderShape="rounded">
+        <StyledButton to={url} target="_blank" variant="outline" shape="pill">
           {buttonText}
           <Launch aria-hidden />
         </StyledButton>

package/src/ResourceGroup/ResourceGroup.tsx

@@ -8,35 +8,33 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing } from '@ndla/core';
+import { css } from '@emotion/react';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import ResourceList, { ResourceListProps } from './ResourceList';
+import { HeadingLevel } from '../types';
 
 const Wrapper = styled.section`
   margin-bottom: ${spacing.large};
 `;
 
-type StyledHeaderProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledHeader = styled.header<StyledHeaderProps>`
-  margin: ${spacing.small} 0 ${spacing.xsmall};
-  ${(props) => props.invertedStyle && `color: #fff`};
-`;
-
-const StyledHeading = styled.h1`
+const headingStyle = css`
   ${fonts.sizes('16px', '18px')};
   font-weight: ${fonts.weight.bold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin: 0;
+  margin: ${spacing.small} 0 ${spacing.xsmall};
+`;
+
+const invertedStyle = css`
+  color: ${colors.white};
 `;
 
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
   heartButton?: (path: string) => ReactNode;
+  headingLevel?: HeadingLevel;
 };
 
 const ResourceGroup = ({
@@ -45,15 +43,12 @@ const ResourceGroup = ({
   showAdditionalResources,
   toggleAdditionalResources,
   contentType,
-  invertedStyle,
+  invertedStyle: invertedStyleProp,
+  headingLevel: Heading = 'h1',
   heartButton,
 }: Props & ResourceListProps) => (
   <Wrapper>
-    {title && (
-      <StyledHeader invertedStyle={invertedStyle}>
-        <StyledHeading>{title}</StyledHeading>
-      </StyledHeader>
-    )}
+    {title && <Heading css={[headingStyle, invertedStyleProp ? invertedStyle : undefined]}>{title}</Heading>}
     {resources.length > 0 ? (
       <ResourceList
         title={title}

package/src/ResourceGroup/ResourceItem.tsx

@@ -80,9 +80,9 @@ const ListElement = styled.li<ListElementProps>`
     props.additional &&
     css`
       border-style: dashed;
-      animation-name: ${fadeInAdditionalsKeyframe};
       animation-duration: 0.8s;
       animation-fill-mode: forwards;
+      animation: ${fadeInAdditionalsKeyframe};
     `}
   ${(props) => props.extraBottomMargin && `margin-bottom: ${spacing.large};`}
 
@@ -143,10 +143,7 @@ const ResourceLink = styled(SafeLink)`
   }
 `;
 
-type ActiveProps = {
-  active?: boolean;
-};
-const Heading = styled.h2<ActiveProps>`
+const headingStyle = css`
   font-weight: ${fonts.weight.semibold};
   transform: translateY(-1px);
   text-transform: none;
@@ -161,28 +158,21 @@ const Heading = styled.h2<ActiveProps>`
     ${fonts.sizes('20px', '26px')};
   }
 
-  span {
-    box-shadow: ${colors.link};
-  }
+  box-shadow: ${colors.link};
 
   ${ResourceLink}:hover &,
   ${ResourceLink}:focus & {
-    span {
-      box-shadow: ${colors.linkHover};
-    }
+    box-shadow: ${colors.linkHover};
+  }
+`;
+
+const activeHeadingStyle = css`
+  color: ${colors.brand.greyDark};
+  box-shadow: none;
+  small {
+    padding-left: ${spacing.small};
+    font-weight: ${fonts.weight.normal};
   }
-  ${(props) =>
-    props.active &&
-    css`
-      color: ${colors.brand.greyDark};
-      span {
-        box-shadow: none;
-      }
-      small {
-        padding-left: ${spacing.small};
-        font-weight: ${fonts.weight.normal};
-      }
-    `}
 `;
 
 const IconWrapper = styled.div`
@@ -247,6 +237,7 @@ const ResourceItem = ({
   const hidden = additional ? !showAdditionalResources : false;
   return (
     <ListElement
+      aria-current={active ? 'page' : undefined}
       contentType={contentType}
       hidden={hidden && !active}
       active={active}
@@ -257,21 +248,17 @@ const ResourceItem = ({
           <IconWrapper>
             <ContentTypeBadge type={contentType ?? ''} background border={false} />
           </IconWrapper>
-          <Heading active>
-            <span>
-              {name}
-              <small>{t('resource.youAreHere')}</small>
-            </span>
-          </Heading>
+          <span css={[headingStyle, activeHeadingStyle]}>
+            {name}
+            <small>{t('resource.youAreHere')}</small>
+          </span>
         </ActiveWrapper>
       ) : (
         <ResourceLink to={path}>
           <IconWrapper>
             <ContentTypeBadge type={contentType ?? ''} background border={false} />
           </IconWrapper>
-          <Heading>
-            <span>{name}</span>
-          </Heading>
+          <span css={headingStyle}>{name}</span>
         </ResourceLink>
       )}
       <TypeWrapper>
@@ -288,18 +275,22 @@ const ResourceItem = ({
           <>
             {additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Additional
-                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                  aria-label={contentTypeDescription}
-                />
+                <div>
+                  <Additional
+                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                    aria-label={contentTypeDescription}
+                  />
+                </div>
               </Tooltip>
             )}
             {!additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Core
-                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                  aria-label={contentTypeDescription}
-                />
+                <div>
+                  <Core
+                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                    aria-label={contentTypeDescription}
+                  />
+                </div>
               </Tooltip>
             )}
           </>