@ndla/ui 33.4.5 → 34.0.1

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/ResourceGroup/ResourceList.tsx

@@ -10,6 +10,7 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import { fonts } from '@ndla/core';
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';
 import { Resource } from '../types';
@@ -33,6 +34,7 @@ const StyledResourceList = styled.ul<StyledListProps>`
   list-style: none;
   margin: 0;
   padding: 0;
+  font-family: ${fonts.sans};
   ${({ showAdditionalResources }) =>
     showAdditionalResources &&
     css`

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',
     },

package/src/locale/messages-nn.ts

@@ -266,6 +266,9 @@ const messages = {
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjerna frå favorittfag',
     addConfirmed: '{{subject}} er lagt til som favorittfag',
+    subjectFavoritePitch: 'Ønsker du å favorittmerke dette faget?',
+    subjectFavoriteGuide:
+      'For å favorittmerke eit fag må du logge inn på Min NDLA. Du finn faget øverst på denne sida etter at du har logga inn.',
     shows: 'Viser',
   },
   topicPage: {
@@ -474,7 +477,7 @@ const messages = {
     useCompentenceGoalsFilter: 'Bruk filter',
     closeCompentenceGoalsFilter: 'Lukk filter',
     competenceGoalsNarrowBackButton: 'Tilbake',
-    competenceGoalResourceSearchText: 'Søk på alle ressursar som passar til dette kompetansemålet',
+    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{goal}}',
     competenceGoalShowExtra: 'Vis støtte til læreplanen',
     competenceGoalCloseExtra: 'Skjul støtte til læreplanen',
     competenceCoreLabel: 'Kjerneelement',
@@ -485,9 +488,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 kjerneelementar',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering',
     },

package/src/locale/messages-se.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: {
@@ -474,7 +477,7 @@ const messages = {
     useCompentenceGoalsFilter: 'Geavat filtara',
     closeCompentenceGoalsFilter: 'Govčča filtara',
     competenceGoalsNarrowBackButton: 'Ruovttoluotta',
-    competenceGoalResourceSearchText: 'Oza buot resurssaid mat heivejit dán gealbomihttomearrái',
+    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{goal}}',
     competenceGoalShowExtra: 'Čájet oahppoplána doarjaga',
     competenceGoalCloseExtra: 'Čiega oahppoplána doarjaga',
     competenceCoreLabel: 'Guovddášelemeanta',
@@ -485,9 +488,10 @@ const messages = {
     competenceSubjectSearchText: 'Mana fágasiidui',
     competenceGoalClose: 'Govčča',
     competenceGoalTitle: 'Mihttun lea ahte oahppi galgá máhttit:',
-    competenceTabLK06label: 'Gealbomihttomearri (ML06)',
-    competenceTabLK20label: 'Gealbomihttomearri (ML20)',
+    competenceTabLK20label: 'Gealbomihttomearri',
+    competenceTabLK20Tooltip: 'Vis kompetansemål',
     competenceTabCorelabel: 'Guovddášelemeanta',
+    competenceTabCoreTooltip: 'Vis kjerneelementer',
     competenceGoalItem: {
       title: 'Gealbomihttomearit ja árvvoštallan',
     },

package/src/locale/messages-sma.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: {
@@ -474,7 +477,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 ressursar til kompetansemål {{goal}}',
     competenceGoalShowExtra: 'Vis støtte til læreplanen',
     competenceGoalCloseExtra: 'Skjul støtte til læreplanen',
     competenceCoreLabel: 'Kjerneelement',
@@ -485,9 +488,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',
     },

package/src/types.ts

@@ -108,9 +108,9 @@ export type CompetenceGoalsItemType = {
   id: string;
   title: string;
   goals: {
+    id: string;
     text: string;
     url?: string;
-    type: 'LK06' | 'LK20';
   }[];
   selected?: boolean;
   isOembed?: boolean;