@ndla/ui 33.4.4 → 34.0.0

package/src/BannerCard/BannerCard.tsx

@@ -75,9 +75,9 @@ type ImageProps = {
 type BannerProps = {
   link: string;
   image: ImageProps;
-  title: string;
-  content: string;
-  linkText: string;
+  title: { title: string; lang?: string };
+  content: { content: string; lang?: string };
+  linkText: { text: string; lang?: string };
 };
 export const BannerCard = ({ link, title, content, linkText, image }: BannerProps) => {
   return (
@@ -86,10 +86,10 @@ export const BannerCard = ({ link, title, content, linkText, image }: BannerProp
         <StyledImage alt={image.altText} src={image.imageSrc} />
       </ImageWrapper>
       <TextWrapper>
-        <TitleText>{title}</TitleText>
-        <ContentText>{content}</ContentText>
-        <LinkText target="_self" to={link}>
-          {linkText}
+        <TitleText lang={title.lang}>{title.title}</TitleText>
+        <ContentText lang={content.lang}>{content.content}</ContentText>
+        <LinkText target="_self" to={link} lang={linkText.lang}>
+          {linkText.text}
         </LinkText>
       </TextWrapper>
     </BannerWrapper>

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -9,49 +9,49 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { fonts, spacing, mq, breakpoints } from '@ndla/core';
+import { Search } from '@ndla/icons/common';
+import { SafeLinkButton } from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import { CompetenceGoalsItemType } from '../types';
-import SearchButton from './SearchButton';
 
 const GoalItem = styled.li`
   margin: ${spacing.medium} 0;
-  list-style-type: none;
-  display: flex;
-  font-size: 18px;
-  line-height: 24px;
   border-bottom: 1px solid #d1d6db;
 `;
 
-const GoalWrapper = styled.div`
-  width: 100%;
-  padding-bottom: ${spacing.small};
-`;
-
 const GoalsHeading = styled.h3`
   margin-top: 0;
-  font-weight: ${fonts.weight.semibold};
 `;
+
+const StyledSearch = styled(Search)`
+  height: 24px;
+  width: 24px;
+  min-width: 24px;
+`;
+
 const GoalList = styled.ul`
   padding: 0;
 `;
-const GoalListElement = styled.li`
-  ${fonts.sizes('22px', '32px')};
+
+const GoalText = styled.p`
+  margin: 0;
 `;
-const GoalListElementInnerWrapper = styled.div`
+
+const ListItemContent = styled.div`
   display: flex;
   justify-content: space-between;
+  ${fonts.sizes('22px', '32px')};
   ${mq.range({ until: breakpoints.tabletWide })} {
     flex-direction: column;
   }
 `;
 
-const GoalListInnerTextWrapper = styled.div`
-  flex: 1;
-`;
-
 const GoalSearchWrapper = styled.div`
   margin-left: ${spacing.normal};
   flex: 0 0 289px;
+  span {
+    text-align: left;
+  }
 
   ${mq.range({ until: breakpoints.tabletWide })} {
     margin-left: 0;
@@ -64,27 +64,24 @@ const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType)
   const { t } = useTranslation();
   return (
     <GoalItem>
-      <GoalWrapper>
-        <GoalsHeading>{title}</GoalsHeading>
-        <GoalList>
-          {goals.map((goal, index: number) => (
-            <GoalListElement key={`${goal.text}${index}`}>
-              <GoalListElementInnerWrapper>
-                <GoalListInnerTextWrapper>{goal.text}</GoalListInnerTextWrapper>
-                {goal.url && goal.type !== 'LK06' && (
-                  <GoalSearchWrapper>
-                    <SearchButton
-                      to={goal.url}
-                      text={t('competenceGoals.competenceGoalResourceSearchText')}
-                      target={isOembed ? '_blank' : '_self'}
-                    />
-                  </GoalSearchWrapper>
-                )}
-              </GoalListElementInnerWrapper>
-            </GoalListElement>
-          ))}
-        </GoalList>
-      </GoalWrapper>
+      <GoalsHeading>{title}</GoalsHeading>
+      <GoalList>
+        {goals.map((goal, index) => (
+          <li key={`${goal.text}${index}`}>
+            <ListItemContent>
+              <GoalText>{goal.text}</GoalText>
+              {goal.url && (
+                <GoalSearchWrapper>
+                  <SafeLinkButton variant="outline" to={goal.url} target={isOembed ? '_blank' : '_self'}>
+                    <StyledSearch size="large" />
+                    <span>{t('competenceGoals.competenceGoalResourceSearchText', { goal: goal.id })}</span>
+                  </SafeLinkButton>
+                </GoalSearchWrapper>
+              )}
+            </ListItemContent>
+          </li>
+        ))}
+      </GoalList>
     </GoalItem>
   );
 };

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -8,37 +8,24 @@
 
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { colors, spacing, mq, breakpoints } from '@ndla/core';
+import { spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { ArrowFeatureTips } from '@ndla/icons/common';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { BY, CC, LicenseByline } from '@ndla/licenses';
+import Tooltip from '@ndla/tooltip';
 import CompetenceItem, { ListItemProp } from './CompetenceItem';
 
 type CompetenceProps = {
   list: ListItemProp[];
-  highlightSearchBox?: boolean;
   isOembed?: boolean;
 };
 
-const Wrapper = styled.div`
-  h2 {
-    margin: 0 0 ${spacing.medium};
-  }
-  position: relative;
-`;
-
-const TabWrapper = styled.div`
+const ButtonWrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  padding-top: ${spacing.small};
+  gap: ${spacing.small};
   flex-wrap: wrap;
-  button {
-    margin: 8px 8px 8px 0;
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
 `;
 
 const LicenseIconsTextWrapper = styled.span`
@@ -46,66 +33,35 @@ const LicenseIconsTextWrapper = styled.span`
   margin-left: 5px;
 `;
 
-const HighlightWrapper = styled.div`
-  position: absolute;
-  right: 0;
-  z-index: 200;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transform: translate(180px, 50%);
-
-  svg {
-    width: 32px;
-    height: auto;
-    position: relative;
-    left: -38px;
-    margin-top: ${spacing.normal};
-  }
-
-  ${mq.range({ until: breakpoints.wide })} {
-    display: none;
-  }
-`;
-
-const HighlightText = styled.span`
-  font-family: 'Shadows Into Light Two';
-  font-display: swap;
-  display: inline-block;
-  color: ${colors.text.light};
-  transform: rotate(14deg);
-  font-size: 20px;
-  max-width: 170px;
-  text-align: center;
-  font-family: 'Shadows Into Light Two', cursive;
-`;
-
-const CompetenceGoalTab = ({ list, highlightSearchBox, isOembed }: CompetenceProps) => {
+const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
   const [currentTabItem, setCurrentTab] = useState(list[0]);
   const { t } = useTranslation();
 
   return (
-    <Wrapper>
-      <TabWrapper>
-        {list.map((tabItem, index: number) => {
-          const { id, title: tabTitle } = tabItem;
-          return (
-            <Button
-              borderShape="rounded"
-              lighter={id !== currentTabItem.id}
-              size="normal"
-              onClick={() => setCurrentTab(list[index])}
-              key={`tabitem-${id}`}>
-              {tabTitle}
-            </Button>
-          );
-        })}
-      </TabWrapper>
-      {highlightSearchBox && (
-        <HighlightWrapper>
-          <HighlightText>{t('checkOutNewFeature')}</HighlightText>
-          <ArrowFeatureTips />
-        </HighlightWrapper>
+    <>
+      {list.length > 1 && (
+        <ButtonWrapper>
+          {list.map((tabItem, index) => {
+            const { id, title: tabTitle, type } = tabItem;
+            return (
+              <Tooltip
+                tooltip={
+                  type === 'coreElement'
+                    ? t('competenceGoals.competenceTabCoreTooltip')
+                    : t('competenceGoals.showCompetenceGoals')
+                }
+                key={`tabitem-${id}`}>
+                <ButtonV2
+                  shape="pill"
+                  aria-current={id === currentTabItem.id}
+                  colorTheme={id !== currentTabItem.id ? 'lighter' : undefined}
+                  onClick={() => setCurrentTab(list[index])}>
+                  {tabTitle}
+                </ButtonV2>
+              </Tooltip>
+            );
+          })}
+        </ButtonWrapper>
       )}
       <CompetenceItem item={currentTabItem} isOembed={isOembed} />
       <LicenseByline licenseRights={[CC, BY]}>
@@ -119,7 +75,7 @@ const CompetenceGoalTab = ({ list, highlightSearchBox, isOembed }: CompetencePro
       <SafeLink to="https://data.udir.no/" target="_blank">
         data.udir.no
       </SafeLink>
-    </Wrapper>
+    </>
   );
 };
 

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { MenuBook } from '@ndla/icons/action';
-import { fonts } from '@ndla/core';
+import { spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import CompetenceGoalItem from './CompetenceGoalItem';
 import { CompetenceGoalsItemType } from '../types';
@@ -21,54 +21,43 @@ const GroupedGoalsWrapper = styled.div`
 const GroupedGoalsTitleWrapper = styled.div`
   border-bottom: 1px solid #d1d6db;
 `;
-const GroupedGoalsTitle = styled.h3`
-  ${fonts.sizes('22px', '32px')};
-  margin-bottom: 0;
+const GroupedGoalsTitle = styled.h2`
   display: flex;
-`;
-
-const GroupedGoalsTitleIcon = styled.span`
-  display: inline-flex;
   align-items: center;
-  margin-right: 8px;
+  gap: ${spacing.xsmall};
+  svg {
+    width: 24px;
+    height: 24px;
+  }
 `;
 
-const GoalsInfo = styled.h4`
-  ${fonts.sizes('22px', '32px')};
-  margin-top: 0;
-  font-weight: ${fonts.weight.normal};
+const GoalsInfo = styled.p`
+  margin: 0;
 `;
 
-const Goals = styled.ul`
+const GoalList = styled.ul`
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-image: none;
 `;
 
-const CoreItem = styled.div`
-  margin: 16px 0 24px;
-`;
 const GroupedCoreItemsWrapper = styled.div`
   margin: 24px 0 52px;
 `;
 
-const CoreItemTitle = styled.h4`
-  font-size: 20px;
-`;
-const CoreItemText = styled.p`
-  font-size: 18px;
-  line-height: 32px;
-`;
-
 export type CompetenceTypeProps = 'competenceGoals' | 'coreElement';
 export type CompetenceGoals = {
-  title?: string;
+  title: string;
   elements: CompetenceGoalsItemType[];
 };
 export type CoreElementItems = {
   title?: string;
-  elements: any;
+  elements: {
+    id: string;
+    name: string;
+    text: string;
+  }[];
 };
 export type ListItemProp = {
   id: string;
@@ -89,59 +78,51 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
     case 'competenceGoals':
       return (
         <>
-          {groupedCompetenceGoals &&
-            groupedCompetenceGoals.map((group) => (
-              <GroupedGoalsWrapper key={group.title}>
-                <GroupedGoalsTitleWrapper>
-                  {group.title && (
-                    <GroupedGoalsTitle>
-                      <GroupedGoalsTitleIcon>
-                        <MenuBook style={{ width: '24px', height: '24px' }} />
-                      </GroupedGoalsTitleIcon>
-                      {group.title}
-                    </GroupedGoalsTitle>
-                  )}
+          {groupedCompetenceGoals?.map((group) => (
+            <GroupedGoalsWrapper key={group.title}>
+              <GroupedGoalsTitleWrapper>
+                <hgroup>
+                  <GroupedGoalsTitle>
+                    <MenuBook />
+                    {group.title}
+                  </GroupedGoalsTitle>
                   <GoalsInfo>{t('competenceGoals.competenceGoalTitle')}</GoalsInfo>
-                </GroupedGoalsTitleWrapper>
-                {group.elements.length > 0 && (
-                  <Goals>
-                    {group.elements.map((goal) => (
-                      <CompetenceGoalItem
-                        key={goal.id}
-                        id={goal.id}
-                        title={goal.title}
-                        goals={goal.goals}
-                        isOembed={isOembed}
-                      />
-                    ))}
-                  </Goals>
-                )}
-              </GroupedGoalsWrapper>
-            ))}
+                </hgroup>
+              </GroupedGoalsTitleWrapper>
+              {group.elements.length > 0 && (
+                <GoalList>
+                  {group.elements.map((goal) => (
+                    <CompetenceGoalItem
+                      key={goal.id}
+                      id={goal.id}
+                      title={goal.title}
+                      goals={goal.goals}
+                      isOembed={isOembed}
+                    />
+                  ))}
+                </GoalList>
+              )}
+            </GroupedGoalsWrapper>
+          ))}
         </>
       );
     case 'coreElement':
       return (
         <>
-          {groupedCoreElementItems &&
-            groupedCoreElementItems.map((group: any) => (
-              <GroupedCoreItemsWrapper key={group.title}>
-                {group.title && (
-                  <GroupedGoalsTitle>
-                    <GroupedGoalsTitleIcon>
-                      <MenuBook style={{ width: '24px', height: '24px' }} />
-                    </GroupedGoalsTitleIcon>
-                    {group.title}
-                  </GroupedGoalsTitle>
-                )}
-                {group.elements.map((coreItem: any) => (
-                  <CoreItem key={coreItem.id}>
-                    {coreItem.name && <CoreItemTitle>{coreItem.name}</CoreItemTitle>}
-                    {coreItem.text && <CoreItemText>{coreItem.text}</CoreItemText>}
-                  </CoreItem>
-                ))}
-              </GroupedCoreItemsWrapper>
-            ))}
+          {groupedCoreElementItems?.map((group) => (
+            <GroupedCoreItemsWrapper key={group.title}>
+              <GroupedGoalsTitle>
+                <MenuBook />
+                {group.title}
+              </GroupedGoalsTitle>
+              {group.elements.map((coreItem) => (
+                <div key={coreItem.id}>
+                  <h3>{coreItem.name}</h3>
+                  <p>{coreItem.text}</p>
+                </div>
+              ))}
+            </GroupedCoreItemsWrapper>
+          ))}
         </>
       );
     default:

package/src/CompetenceGoals/CompetenceGoalsDialog.tsx

@@ -21,7 +21,7 @@ const HeaderWrapper = styled.div`
   width: 100%;
 `;
 
-const HeadingWrapper = styled.h2`
+const HeadingWrapper = styled.h1`
   display: flex;
   align-items: center;
   ${fonts.sizes('18px', '32px')};

package/src/Filter/component.filter.scss

@@ -131,7 +131,7 @@
       @include mq($until: mobileWide) {
         width: 100% !important;
         margin: $spacing 0 0 0 !important;
-        padding: $spacing--small / 2 $left-margin-narrow-screen;
+        padding: $spacing--small / 2 20px;
         background: $brand-grey--lighter;
         flex-direction: row;
         .c-filter__item label {
@@ -267,7 +267,8 @@
       display: none !important;
     }
 
-    &--no-results, &--disabled {
+    &--no-results,
+    &--disabled {
       cursor: not-allowed;
       pointer-events: none;
       color: $brand-color--tertiary;
@@ -335,7 +336,6 @@
         .c-filter__text {
           flex-grow: 1;
         }
-
       }
     }
   }
@@ -496,7 +496,7 @@
       display: flex;
       align-items: baseline;
       h1 {
-        margin-right:$spacing;
+        margin-right: $spacing;
       }
     }
   }

package/src/MyNdla/Resource/FolderInput.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { IconButton, IconButtonV2 } from '@ndla/button';
+import { IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import React, { ComponentProps, forwardRef, useEffect } from 'react';
 import { isMobile } from 'react-device-detect';
@@ -95,9 +95,9 @@ const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClo
                   <Done />
                 </IconButtonV2>
               )}
-              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onClose}>
+              <IconButtonV2 aria-label={t('close')} title={t('close')} size="small" variant="ghost" onClick={onClose}>
                 <Cross />
-              </IconButton>
+              </IconButtonV2>
             </>
           )}
           <div aria-live="assertive">

package/src/SnackBar/DefaultSnackbar.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { IconButton } from '@ndla/button';
+import { IconButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from '@ndla/core';
 import { Cross } from '@ndla/icons/action';
 import { Snack, useSnack } from './SnackbarProvider';
@@ -29,19 +29,6 @@ const DefaultSnackContainer = styled.div`
   align-items: center;
 `;
 
-const StyledCloseButton = styled(IconButton)`
-  svg {
-    color: ${colors.brand.greyMedium};
-  }
-  &:hover,
-  &:focus {
-    background: ${colors.brand.greyDark};
-    svg {
-      color: ${colors.brand.greyLightest};
-    }
-  }
-`;
-
 const ButtonWrapper = styled.div`
   ${mq.range({ from: breakpoints.tablet })} {
     gap: ${spacing.xxsmall};
@@ -58,9 +45,14 @@ const DefaultSnack = (snack: Snack) => {
       {snack.content}
       <ButtonWrapper>
         {closable && (
-          <StyledCloseButton size="xsmall" outline onClick={() => closeSnack(snack)} aria-label={t('snackbar.close')}>
+          <IconButtonV2
+            size="xsmall"
+            variant="outline"
+            colorTheme="greyLighter"
+            onClick={() => closeSnack(snack)}
+            aria-label={t('snackbar.close')}>
             <Cross />
-          </StyledCloseButton>
+          </IconButtonV2>
         )}
       </ButtonWrapper>
     </DefaultSnackContainer>

package/src/index.ts

@@ -9,9 +9,6 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
-/** @ts-ignore */
-export * from './index-javascript';
-
 export { default as SectionHeading } from './SectionHeading';
 
 export {

package/src/locale/messages-en.ts

@@ -267,6 +267,9 @@ const messages = {
     removeFavorite: 'Remove favorite subject',
     removeConfirmed: '{{subject}} is removed from your favorite subjects',
     addConfirmed: '{{subject}} is added to your favorite subjects',
+    subjectFavoritePitch: 'Do you want to favorite this subject?',
+    subjectFavoriteGuide:
+      'To favorite a subject you must log in to My NDLA. You will find the subject on the top of this page after logging in.',
     shows: 'Shows',
   },
   topicPage: {
@@ -474,7 +477,7 @@ const messages = {
     useCompentenceGoalsFilter: 'Use filter',
     closeCompentenceGoalsFilter: 'Close filter',
     competenceGoalsNarrowBackButton: 'Go back',
-    competenceGoalResourceSearchText: 'Search all resources appropriate to this goal',
+    competenceGoalResourceSearchText: 'View resources to competence goal {{goal}}',
     competenceGoalShowExtra: 'Show',
     competenceGoalCloseExtra: 'Hide',
     competenceCoreLabel: 'Core element',
@@ -485,9 +488,10 @@ const messages = {
     competenceSubjectSearchText: 'Go to topic page',
     competenceGoalClose: 'Close',
     competenceGoalTitle: 'The pupil is expected to be able to:',
-    competenceTabLK06label: 'Competence goal (LK06)',
-    competenceTabLK20label: 'Competence goal (LK20)',
+    competenceTabLK20label: 'Competence goal',
+    competenceTabLK20Tooltip: 'Show competence goals',
     competenceTabCorelabel: 'Core element',
+    competenceTabCoreTooltip: 'Show core elements',
     competenceGoalItem: {
       title: 'Competence goals and assessment',
     },

package/src/locale/messages-nb.ts

@@ -266,6 +266,9 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    subjectFavoritePitch: 'Ønsker du å favorittmerke dette faget?',
+    subjectFavoriteGuide:
+      'For å favorittmerke et fag må du logge inn på Min NDLA. Du finner faget øverst på denne siden etter at du har logget inn.',
     shows: 'Viser',
   },
   topicPage: {
@@ -473,7 +476,7 @@ const messages = {
     useCompentenceGoalsFilter: 'Bruk filter',
     closeCompentenceGoalsFilter: 'Lukk filter',
     competenceGoalsNarrowBackButton: 'Tilbake',
-    competenceGoalResourceSearchText: 'Søk på alle ressurser som passer til dette kompetansemålet',
+    competenceGoalResourceSearchText: 'Vis ressurser til kompetansemål {{goal}}',
     competenceGoalShowExtra: 'Vis støtte til læreplanen',
     competenceGoalCloseExtra: 'Skjul støtte til læreplanen',
     competenceCoreLabel: 'Kjerneelement',
@@ -484,9 +487,10 @@ const messages = {
     competenceSubjectSearchText: 'Gå til fagsiden',
     competenceGoalClose: 'Lukk',
     competenceGoalTitle: 'Målet er at eleven skal kunne:',
-    competenceTabLK06label: 'Kompetansemål (LK06)',
-    competenceTabLK20label: 'Kompetansemål (LK20)',
+    competenceTabLK20label: 'Kompetansemål',
+    competenceTabLK20Tooltip: 'Vis kompetansemål',
     competenceTabCorelabel: 'Kjerneelement',
+    competenceTabCoreTooltip: 'Vis kjerneelementer',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering',
     },