@ndla/ui 50.6.0 → 50.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.6.0",
+  "version": "50.6.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.14",
-    "@ndla/button": "^12.0.19",
-    "@ndla/carousel": "^4.0.20",
-    "@ndla/core": "^4.3.0",
-    "@ndla/dropdown-menu": "^1.0.20",
-    "@ndla/forms": "^5.2.9",
+    "@ndla/accordion": "^3.0.15",
+    "@ndla/button": "^12.0.20",
+    "@ndla/carousel": "^4.0.21",
+    "@ndla/core": "^4.3.1",
+    "@ndla/dropdown-menu": "^1.0.21",
+    "@ndla/forms": "^5.2.10",
     "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^4.2.6",
+    "@ndla/icons": "^5.0.0",
     "@ndla/licenses": "^7.2.4",
-    "@ndla/modal": "^5.0.19",
-    "@ndla/notion": "^6.0.20",
-    "@ndla/safelink": "^4.1.44",
-    "@ndla/select": "^3.2.6",
-    "@ndla/switch": "^1.1.26",
-    "@ndla/tabs": "^3.2.6",
-    "@ndla/tooltip": "^6.0.8",
-    "@ndla/typography": "^0.4.3",
+    "@ndla/modal": "^5.0.20",
+    "@ndla/notion": "^6.0.21",
+    "@ndla/safelink": "^4.1.45",
+    "@ndla/select": "^3.2.7",
+    "@ndla/switch": "^1.1.27",
+    "@ndla/tabs": "^3.2.7",
+    "@ndla/tooltip": "^6.0.9",
+    "@ndla/typography": "^0.4.4",
     "@ndla/util": "^4.0.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3930fca2deff61ba578d6c17b8adf89604ccbe7c"
+  "gitHead": "01e39c5380bd6716fe0f0deaa0f095f6fc0f619c"
 }

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -41,7 +41,7 @@ const SearchButton = ({ url, isOembed, searchText }: SearchButtonProps) => {
   return (
     <GoalSearchWrapper>
       <SafeLinkButton variant="outline" to={url} target={isOembed ? '_blank' : '_self'}>
-        <StyledSearch size="24" />
+        <StyledSearch size="normal" />
         <span>{searchText}</span>
       </SafeLinkButton>
     </GoalSearchWrapper>

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -30,12 +30,12 @@ const ErrorResourceAccessDenied = ({ onAuthenticateClick }: Props) => {
         back: t('errorMessage.back'),
         goToFrontPage: t('errorMessage.goToFrontPage'),
       }}
-      illustrationElement={<HumanMaleBoard className="c-icon--large" />}
+      illustrationElement={<HumanMaleBoard size="large" />}
       customElement={
         <ButtonV2 size="medium" onClick={onAuthenticateClick}>
           {t('user.buttonLogIn')}
           <StyledLogInIconWrapper aria-hidden>
-            <LogIn className="c-icon--medium" />
+            <LogIn size="normal" />
           </StyledLogInIconWrapper>
         </ButtonV2>
       }

package/src/Figure/component.figure.scss

@@ -37,7 +37,10 @@
   margin: $spacing 0 $spacing;
   position: relative;
   width: 100%;
-  transition: transform 0.4s, width 0.4s, height 0.4s;
+  transition:
+    transform 0.4s,
+    width 0.4s,
+    height 0.4s;
 
   &--full-column {
     left: auto !important;
@@ -235,7 +238,7 @@
   &__link-wrapper {
     margin-top: $spacing--small;
 
-    .c-icon {
+    [data-icon] {
       margin-left: $spacing--small/2;
       width: 18px;
       height: 18px;

package/src/FileList/FileList.tsx

@@ -21,6 +21,14 @@ const FileListSection = styled.section`
   padding: 0 0 ${spacing.normal} ${spacing.normal};
   border-left: 2px solid ${colors.brand.greyLightest};
   font-family: ${fonts.sans};
+
+  [data-icon] {
+    margin-top: 3px;
+    flex-shrink: 0;
+    margin-right: ${spacing.small};
+    height: 18px;
+    width: 18px;
+  }
 `;
 
 const FileListHeaderWrapper = styled.div`

package/src/Filter/component.filter.scss

@@ -292,7 +292,7 @@
       }
     }
 
-    .c-icon {
+    [data-icon] {
       margin-left: $spacing--small;
     }
 

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -97,6 +97,7 @@ const StyledIntroHeader = styled.h1`
 const StyledRow = styled.div`
   display: flex;
   gap: ${spacing.small};
+  align-items: center;
 `;
 
 interface Props {

package/src/LearningPaths/LearningPathSticky.tsx

@@ -63,9 +63,6 @@ const SafeLinkCSS = css`
     padding: 0;
   }
   transition: background 200ms ease;
-  > .c-icon--medium {
-    transition: transform 200ms ease;
-  }
   div {
     display: flex;
     flex-direction: column;
@@ -88,16 +85,6 @@ const SafeLinkCSS = css`
         box-shadow: none;
       }
     }
-    ${mq.range({ from: breakpoints.tablet })} {
-      > .c-icon--medium {
-        transform: translateX(${spacing.xsmall});
-      }
-      &:first-of-type {
-        > .c-icon--medium {
-          transform: translateX(-${spacing.xsmall});
-        }
-      }
-    }
   }
 `;
 
@@ -123,11 +110,11 @@ export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, st
       css={SafeLinkCSS}
       aria-label={arrow === 'left' ? t('learningPath.previousArrow') : t('learningPath.nextArrow')}
     >
-      {arrow === 'left' && <Back className="c-icon--medium" />}
+      {arrow === 'left' && <Back size="normal" />}
       <div>
         <StyledTitle>{title}</StyledTitle>
       </div>
-      {arrow === 'right' && <Forward className="c-icon--medium" />}
+      {arrow === 'right' && <Forward size="normal" />}
     </SafeLink>
   );
 };

package/src/Search/ContentTypeResult.tsx

@@ -32,13 +32,13 @@ const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactEleme
     return (
       <Tooltip tooltip={label}>
         <div>
-          <Additional className="c-icon--20" aria-hidden={false} />
+          <Additional size="normal" aria-hidden={false} />
         </div>
       </Tooltip>
     );
   }
   if (isAdditional) {
-    return <Additional className="c-icon--20" />;
+    return <Additional size="normal" />;
   }
   return null;
 };

package/src/Search/SearchResult.tsx

@@ -223,9 +223,9 @@ const StyledBreadcrumb = styled.div`
   ${mq.range({ from: breakpoints.desktop })} {
     ${fonts.sizes('16px', '24px')};
   }
-  .c-icon {
-    width: 12px;
-    height: 12px;
+  [data-icon] {
+    width: ${spacing.small};
+    height: ${spacing.small};
     margin: 0 ${spacingUnit / 3}px;
 
     ${mq.range({ from: breakpoints.desktop })} {

package/src/Search/SearchResultSleeve.tsx

@@ -298,7 +298,7 @@ const SearchResultSleeve = ({
       <StyledScrollableContent extendHeight={frontpage ? 0 : 52}>
         {infoText && (
           <StyledAside>
-            <Wrench className="c-icon--22" />
+            <Wrench size="normal" />
             <span>{infoText}</span>
           </StyledAside>
         )}
@@ -309,7 +309,7 @@ const SearchResultSleeve = ({
               to={allResultUrl}
               tabIndex={-1}
             >
-              <SearchIcon className="c-icon--22" />
+              <SearchIcon size="normal" />
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
             </StyledSearchLink>
@@ -319,7 +319,7 @@ const SearchResultSleeve = ({
                 to={suggestionUrl}
                 tabIndex={-1}
               >
-                <SearchIcon className="c-icon--22" />
+                <SearchIcon size="normal" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
                 <strong ref={searchSuggestionRef}>{suggestion}</strong>
               </StyledSearchLink>

package/src/Search/component.search-result.scss

@@ -259,7 +259,7 @@
       @include font-size(16px, 24px);
     }
 
-    .c-icon {
+    [data-icon] {
       width: 12px;
       height: 12px;
       margin: 0 $spacing--small/3;

package/src/all.scss

@@ -1,4 +1,3 @@
 @import '~@ndla/core/scss/core';
-@import '~@ndla/icons/scss/icons';
 @import './main';
 @import '~@ndla/core/scss/utilities';