@ndla/ui 42.0.5 → 42.1.0

package/src/SearchTypeResult/SearchHeader.tsx

@@ -13,9 +13,10 @@ import { ButtonV2 } from '@ndla/button';
 import { Spinner } from '@ndla/icons';
 
 import SearchFieldHeader from './SearchFieldHeader';
-import { CompetenceGoalsItemType } from '../types';
+import { CompetenceGoalsItemType, CoreElementsItemType } from '../types';
 import CompetenceGoalItem from '../CompetenceGoalTab/CompetenceGoalItem';
 import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
+import CoreElementItem from '../CompetenceGoalTab/CoreElementItem';
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
@@ -36,13 +37,13 @@ const PhraseWrapper = styled.div`
   margin: ${spacing.normal} 0 ${spacing.medium};
 `;
 
-const CompetenceGoalsWrapper = styled.div`
+const GrepCodesWrapper = styled.div`
   font-size: 16px;
   width: 100%;
   margin-top: ${spacing.normal};
 `;
 
-const CompetenceGoalsList = styled.ul`
+const GrepCodesList = styled.ul`
   padding: 0;
   margin: 0;
   li {
@@ -56,7 +57,7 @@ const PhraseText = styled.div`
 `;
 const PhraseSuggestionText = styled.div``;
 
-const GoalsLabel = styled.div`
+const GrepCodesLabel = styled.div`
   ${fonts.sizes('16px', '32px')};
   text-transform: uppercase;
 `;
@@ -69,6 +70,7 @@ type Props = {
   filters: SubjectFilterProps['filters'];
   activeFilters?: SubjectFilterProps['activeFilters'];
   competenceGoals?: CompetenceGoalsItemType[];
+  coreElements?: CoreElementsItemType[];
   onSearchValueChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   noResults?: boolean;
@@ -85,6 +87,7 @@ const SearchHeader = ({
   activeFilters,
   filters,
   competenceGoals,
+  coreElements,
   noResults,
   loading,
 }: Props) => {
@@ -143,18 +146,30 @@ const SearchHeader = ({
           </PhraseSuggestionText>
         )}
         {!!competenceGoals?.length && (
-          <CompetenceGoalsWrapper>
+          <GrepCodesWrapper>
             {competenceGoals?.length && (
               <>
-                <GoalsLabel>{t('competenceGoals.competenceGoalItem.title')}</GoalsLabel>
-                <CompetenceGoalsList>
+                <GrepCodesLabel>{t('competenceGoals.competenceGoalItem.title')}</GrepCodesLabel>
+                <GrepCodesList>
                   {competenceGoals.map((e) => (
                     <CompetenceGoalItem key={e.id} id={e.id} title={e.title} goals={e.goals} />
                   ))}
-                </CompetenceGoalsList>
+                </GrepCodesList>
               </>
             )}
-          </CompetenceGoalsWrapper>
+          </GrepCodesWrapper>
+        )}
+        {!!coreElements?.length && (
+          <GrepCodesWrapper>
+            <>
+              <GrepCodesLabel>{t('competenceGoals.competenceTabCorelabel')}</GrepCodesLabel>
+              <GrepCodesList>
+                {coreElements.map((e) => (
+                  <CoreElementItem key={e.id} id={e.id} title={e.title} text={e.text} url={e.url} />
+                ))}
+              </GrepCodesList>
+            </>
+          </GrepCodesWrapper>
         )}
       </PhraseWrapper>
       {isNarrowScreen && (

package/src/locale/messages-en.ts

@@ -490,7 +490,8 @@ const messages = {
     useCompentenceGoalsFilter: 'Use filter',
     closeCompentenceGoalsFilter: 'Close filter',
     competenceGoalsNarrowBackButton: 'Go back',
-    competenceGoalResourceSearchText: 'View resources to competence goal {{goal}}',
+    competenceGoalResourceSearchText: 'View resources to competence goal {{code}}',
+    coreResourceSearchText: 'View resources to core element {{code}}',
     competenceGoalShowExtra: 'Show',
     competenceGoalCloseExtra: 'Hide',
     competenceCoreLabel: 'Core element',

package/src/locale/messages-nb.ts

@@ -489,7 +489,8 @@ const messages = {
     useCompentenceGoalsFilter: 'Bruk filter',
     closeCompentenceGoalsFilter: 'Lukk filter',
     competenceGoalsNarrowBackButton: 'Tilbake',
-    competenceGoalResourceSearchText: 'Vis ressurser til kompetansemål {{goal}}',
+    competenceGoalResourceSearchText: 'Vis ressurser til kompetansemål {{code}}',
+    coreResourceSearchText: 'Vis ressurser til kjerneelement {{code}}',
     competenceGoalShowExtra: 'Vis støtte til læreplanen',
     competenceGoalCloseExtra: 'Skjul støtte til læreplanen',
     competenceCoreLabel: 'Kjerneelement',

package/src/locale/messages-nn.ts

@@ -489,7 +489,8 @@ const messages = {
     useCompentenceGoalsFilter: 'Bruk filter',
     closeCompentenceGoalsFilter: 'Lukk filter',
     competenceGoalsNarrowBackButton: 'Tilbake',
-    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{goal}}',
+    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{code}}',
+    coreResourceSearchText: 'Vis ressursar til kjerneelement {{code}}',
     competenceGoalShowExtra: 'Vis støtte til læreplanen',
     competenceGoalCloseExtra: 'Skjul støtte til læreplanen',
     competenceCoreLabel: 'Kjerneelement',

package/src/locale/messages-se.ts

@@ -490,7 +490,8 @@ const messages = {
     useCompentenceGoalsFilter: 'Geavat filtara',
     closeCompentenceGoalsFilter: 'Govčča filtara',
     competenceGoalsNarrowBackButton: 'Ruovttoluotta',
-    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{goal}}',
+    competenceGoalResourceSearchText: 'Vis ressursar til kompetansemål {{code}}',
+    coreResourceSearchText: 'Vis ressurser til kjerneelement {{code}}',
     competenceGoalShowExtra: 'Čájet oahppoplána doarjaga',
     competenceGoalCloseExtra: 'Čiega oahppoplána doarjaga',
     competenceCoreLabel: 'Guovddášelemeanta',

package/src/locale/messages-sma.ts

@@ -490,7 +490,8 @@ const messages = {
     useCompentenceGoalsFilter: 'Bruk filter',
     closeCompentenceGoalsFilter: 'Lukk filter',
     competenceGoalsNarrowBackButton: 'Tilbake',
-    competenceGoalResourceSearchText: 'Ohtsh gaajhkh vierhtieh mah daan maahtoeålman sjiehtieh',
+    competenceGoalResourceSearchText: 'Ohtsh gaajhkh vierhtieh mah daan maahtoeålman sjiehtieh {{code}}',
+    coreResourceSearchText: 'Vis ressurser til kjerneelement {{code}}',
     competenceGoalShowExtra: 'Vuesehth learoesoejkesjen dåarjoem',
     competenceGoalCloseExtra: 'Tjïekh learoesoejkesjen dåarjoem',
     competenceCoreLabel: 'Jarngebiehkie',

package/src/types.ts

@@ -104,9 +104,12 @@ export type elementRectType = {
   fromScale: number;
 };
 
-export type CompetenceGoalsItemType = {
+interface GrepCode {
   id: string;
   title: string;
+}
+
+export interface CompetenceGoalsItemType extends GrepCode {
   goals: {
     id: string;
     text: string;
@@ -114,7 +117,13 @@ export type CompetenceGoalsItemType = {
   }[];
   selected?: boolean;
   isOembed?: boolean;
-};
+}
+
+export interface CoreElementsItemType extends GrepCode {
+  text?: string;
+  url?: string;
+  isOembed?: boolean;
+}
 
 export type NotionMedia = {
   type: 'video' | 'other';