@ndla/ui 42.0.2 → 42.0.4

package/src/Gloss/Gloss.stories.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import { Meta, StoryObj, StoryFn } from '@storybook/react';
+import Gloss from './Gloss';
+import { defaultParameters } from '../../../../stories/defaults';
+import { WordClass } from '../model/WordClass';
+
+const meta: Meta<typeof Gloss> = {
+  title: 'Components/Gloss',
+  component: Gloss,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    title: {
+      title: 'Å angripe',
+      language: 'nb',
+    },
+    glossData: {
+      gloss: 'angreifen',
+      wordClass: WordClass.Verb,
+      originalLanguage: 'de',
+      transcriptions: {},
+      examples: [
+        [
+          {
+            example: 'Hitler greift die Sowjetunion an',
+            language: 'de',
+            transcriptions: {},
+          },
+          {
+            example: 'Hitler angriper Sovjetunionen',
+            language: 'nb',
+            transcriptions: {},
+          },
+        ],
+        [
+          {
+            example: 'Ich greife an',
+            language: 'de',
+            transcriptions: {},
+          },
+          {
+            example: 'Jeg griper an',
+            language: 'nb',
+            transcriptions: {},
+          },
+        ],
+      ],
+    },
+    audio: {
+      title: '',
+      src: '',
+    },
+  },
+};
+
+export default meta;
+
+export const GlossStory: StoryFn<typeof Gloss> = ({ ...args }) => {
+  return <Gloss {...args} />;
+};
+
+export const GlossChineseStory: StoryObj<typeof Gloss> = {
+  args: {
+    title: {
+      title: 'Ma Hong',
+      language: 'nb',
+    },
+    glossData: {
+      gloss: '马红',
+      wordClass: WordClass.ProperNoun,
+      originalLanguage: 'zh',
+      transcriptions: {
+        traditional: '(馬紅)',
+        pinyin: 'Mǎ Hóng',
+      },
+      examples: [
+        [
+          {
+            example: '我叫马红',
+            language: 'zh',
+            transcriptions: {
+              pinyin: 'wo jiao ma hong',
+            },
+          },
+          {
+            example: 'Jeg heter ma hong',
+            language: 'nb',
+            transcriptions: {},
+          },
+        ],
+      ],
+    },
+    audio: {
+      title: 'Spill av lyd',
+      src: 'https://api.staging.ndla.no/audio/files/shu3jia4.mp3',
+    },
+  },
+};

package/src/Gloss/Gloss.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import { colors, spacing, misc, fonts } from '@ndla/core';
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionContent } from '@ndla/accordion';
+import { Transcription } from '../model/Transcriptions';
+import SpeechControl from '../AudioPlayer/SpeechControl';
+
+interface Example {
+  example: string;
+  language: string;
+  transcriptions: Transcription;
+}
+
+export interface Props {
+  title: {
+    title: string;
+    language: string;
+  };
+  glossData: {
+    gloss: string;
+    wordClass?: string;
+    originalLanguage: string;
+    transcriptions: Transcription;
+    examples?: Example[][];
+  };
+  audio: {
+    title: string;
+    src?: string;
+  };
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${colors.background.lightBlue};
+  padding: ${spacing.nsmall} ${spacing.normal};
+  border: 1px solid ${colors.brand.lighter};
+  border-radius: ${misc.borderRadius};
+  margin-bottom: ${spacing.xsmall};
+  gap: ${spacing.nsmall};
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`;
+
+const GlossContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${spacing.nsmall};
+`;
+
+const GlossSpan = styled.span`
+  font-weight: ${fonts.weight.bold};
+`;
+
+const TypeSpan = styled.span`
+  font-style: italic;
+`;
+
+const StyledAccordionHeader = styled(AccordionHeader)`
+  font-family: ${fonts.sans};
+  ${fonts.sizes('16px', '24px')};
+  font-weight: ${fonts.weight.semibold};
+  background-color: ${colors.background.lightBlue};
+`;
+
+const StyledAccordionContent = styled(AccordionContent)`
+  padding: 0;
+`;
+
+const TranslatedText = styled.span`
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid ${colors.brand.lighter};
+  padding: ${spacing.small} ${spacing.normal};
+  font-family: ${fonts.sans};
+  ${fonts.sizes('18px', '24px')};
+  :first-child {
+    color: ${colors.brand.dark};
+    font-weight: ${fonts.weight.bold};
+    background-color: ${colors.background.lightBlue};
+  }
+`;
+
+const Gloss = ({ title, glossData, audio }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Container>
+        <Wrapper>
+          <GlossContainer>
+            <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
+            {glossData.transcriptions.traditional && (
+              <span
+                key={t('gloss.transcriptions.traditional')}
+                aria-label={t('gloss.transcriptions.traditional')}
+                lang={glossData.originalLanguage}
+              >
+                {glossData.transcriptions.traditional}
+              </span>
+            )}
+            {glossData.transcriptions.pinyin && (
+              <span
+                key={t('gloss.transcriptions.pinyin')}
+                aria-label={t('gloss.transcriptions.pinyin')}
+                lang={glossData.originalLanguage}
+              >
+                {glossData.transcriptions.pinyin}
+              </span>
+            )}
+            {glossData.wordClass && (
+              <TypeSpan aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`)}</TypeSpan>
+            )}
+          </GlossContainer>
+          {audio.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
+        </Wrapper>
+        <span>{title.title}</span>
+      </Container>
+      {glossData.examples && (
+        <AccordionRoot type="single" collapsible>
+          <AccordionItem value="1">
+            <StyledAccordionHeader>{t('gloss.examples')}</StyledAccordionHeader>
+            <StyledAccordionContent>
+              {glossData.examples.map((example, index) => (
+                <div key={index}>
+                  {example.map((translation) => (
+                    <>
+                      <TranslatedText>{translation.example}</TranslatedText>
+                      {translation.transcriptions.pinyin && (
+                        <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
+                          {translation.transcriptions?.pinyin}
+                        </TranslatedText>
+                      )}
+                      {translation.transcriptions.traditional && (
+                        <TranslatedText key={t('gloss.transcriptions.traditional')} lang={glossData.originalLanguage}>
+                          {translation.transcriptions?.traditional}
+                        </TranslatedText>
+                      )}
+                    </>
+                  ))}
+                </div>
+              ))}
+            </StyledAccordionContent>
+          </AccordionItem>
+        </AccordionRoot>
+      )}
+    </>
+  );
+};
+
+export default Gloss;

package/src/Gloss/index.tsx

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { default as Gloss } from './Gloss';

package/src/Grid/Grid.stories.tsx

@@ -18,7 +18,7 @@ import { KeyFigureStory } from '../KeyFigure/KeyFigure.stories';
 
 const GridWrapper = styled.div`
   .docs-story {
-    background-color: ${colors.background.frontpageArticle};
+    background-color: ${colors.background.lightBlue};
   }
 `;
 

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -20,7 +20,7 @@ const args = {
 };
 
 export default {
-  title: 'Components/Nøkkeltall',
+  title: 'Components/Key figures',
   component: KeyFigure,
   tags: ['autodocs'],
   parameters: {
@@ -35,4 +35,4 @@ export const KeyFigureStory: StoryFn<typeof KeyFigure> = ({ ...args }) => {
 };
 
 KeyFigureStory.args = args;
-KeyFigureStory.storyName = 'Nøkkeltall';
+KeyFigureStory.storyName = 'Key figures';

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -50,7 +50,7 @@ const args = {
 };
 
 export default {
-  title: 'Patterns/Læringssti-meny',
+  title: 'Patterns/Learning path menu',
   component: LearningPathMenu,
   tags: ['autodocs'],
   parameters: {
@@ -65,4 +65,4 @@ export const LearningPathMenuStory: StoryFn<typeof LearningPathMenu> = ({ ...arg
 };
 
 LearningPathMenuStory.args = args;
-LearningPathMenuStory.storyName = 'Læringssti-meny';
+LearningPathMenuStory.storyName = 'Learning path menu';

package/src/List/OrderedList.tsx

@@ -41,51 +41,60 @@ const StyledOl = styled.ol`
       margin-bottom: ${spacing.nsmall} !important;
     }
   }
+  counter-reset: level1;
 
   &[data-type='letters'] {
-    counter-reset: item 0;
     > li {
-      counter-increment: item;
       &:before {
-        position: absolute;
-        transform: translateX(-100%);
-        content: counter(item, upper-alpha) '.';
-        padding-right: ${spacing.nsmall};
+        content: counter(level1, upper-alpha) '.';
       }
 
       > ol[data-type='letters'] {
         > li:before {
-          content: counter(item, lower-alpha) '.';
+          content: counter(level1, lower-alpha) '.';
         }
         ol[data-type='letters'] {
           > li:before {
-            content: counter(item, lower-roman) '.';
+            content: counter(level1, lower-roman) '.';
           }
         }
       }
     }
   }
 
-  &:not([data-type='letters']) {
-    counter-reset: item 0;
-    > li {
-      counter-increment: item;
-      &:before {
-        position: absolute;
-        transform: translateX(-100%);
-        content: counters(item, '.') '.';
-        padding-right: ${spacing.nsmall};
-      }
+  > li {
+    counter-increment: level1;
+    &:before {
+      position: absolute;
+      transform: translateX(-100%);
+      content: counter(level1, decimal) '.';
+      padding-right: ${spacing.nsmall};
+    }
 
-      > ol:not([data-type='letters']) {
-        > li {
-          padding-left: ${spacing.nsmall};
-          > ol:not([data-type='letters']) {
-            > li {
-              padding-left: ${spacing.medium};
-              > ol:not([data-type='letters']) {
-                > li {
-                  padding-left: ${spacing.large};
+    > ol:not([data-type='letters']) {
+      counter-reset: level2;
+      > li {
+        padding-left: ${spacing.nsmall};
+        counter-increment: level2;
+        &:before {
+          content: counter(level1, decimal) '.' counter(level2, decimal) '.';
+        }
+        > ol:not([data-type='letters']) {
+          counter-reset: level3;
+          > li {
+            padding-left: ${spacing.medium};
+            counter-increment: level3;
+            &:before {
+              content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.';
+            }
+            > ol:not([data-type='letters']) {
+              counter-reset: level4;
+              > li {
+                padding-left: ${spacing.large};
+                counter-increment: level4;
+                &:before {
+                  content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.'
+                    counter(level4, decimal) '.';
                 }
               }
             }

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -7,7 +7,7 @@ import { defaultParameters } from '../../../../../stories/defaults';
 import Folder from './Folder';
 
 export default {
-  title: 'Components/Mappe',
+  title: 'Components/Folder',
   component: Folder,
   tags: ['autodocs'],
   parameters: {

package/src/Navigation/NavigationBox.tsx

@@ -182,7 +182,7 @@ type Props = {
   heading?: string;
   colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
   isButtonElements?: boolean;
-  items: ItemProps[];
+  items?: ItemProps[];
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
@@ -224,7 +224,7 @@ export const NavigationBox = ({
         )}
       </StyledHeadingWrapper>
       <StyledList data-testid="nav-box-list" direction={listDirection}>
-        {items.map((item: ItemProps) => (
+        {items?.map((item: ItemProps) => (
           <StyledListItem key={item.label} listDirection={listDirection} data-testid="nav-box-item">
             <StyledListElementWrapper
               isAdditionalResource={item.isAdditionalResource}

package/src/Programme/ProgrammeSubjects.tsx

@@ -24,12 +24,12 @@ const GradesMenu = styled.ul`
 
 export type GradesProps = {
   selectedGrade?: string;
-  grades: {
+  grades?: {
     missingProgrammeSubjects?: boolean;
     name: string;
-    categories: {
+    categories?: {
       name: string;
-      subjects: {
+      subjects?: {
         label: string;
         url: string;
       }[];
@@ -45,14 +45,14 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
   const { t } = useTranslation();
 
   const grade = useMemo(
-    () => grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0],
+    () => grades?.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades?.[0],
     [grades, selectedGrade],
   );
 
   return (
     <>
       <GradesMenu aria-label={t('programme.grades')}>
-        {grades.map((item) => {
+        {grades?.map((item) => {
           const current = item.name.toLowerCase() === selectedGrade;
           return (
             <li key={item.name}>
@@ -69,8 +69,8 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
           );
         })}
       </GradesMenu>
-      {grade.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
-      {grade.categories.map((category) => (
+      {grade?.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
+      {grade?.categories?.map((category) => (
         <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}
     </>

package/src/Resource/BlockResource.stories.tsx

@@ -12,7 +12,7 @@ import { defaultParameters } from '../../../../stories/defaults';
 import BlockResource from './BlockResource';
 
 export default {
-  title: 'Components/Ressurser/BlockResource',
+  title: 'Components/Resources/BlockResource',
   component: BlockResource,
   tags: ['autodocs'],
   parameters: {

package/src/Resource/Resource.stories.tsx

@@ -12,7 +12,7 @@ import { defaultParameters } from '../../../../stories/defaults';
 import ListResource from './ListResource';
 
 export default {
-  title: 'Components/Ressurser/ListResource',
+  title: 'Components/Resources/ListResource',
   component: ListResource,
   tags: ['autodocs'],
   parameters: {

package/src/global/components/component.bodybox.scss

@@ -31,22 +31,6 @@
   }
 }
 
-/* Hacks for complex content fetched inside bodybox */
-.c-bodybox > ul:not([class]),
-.c-bodybox :not(li) > ul:not([class]) {
-  @include mq(desktop) {
-    margin-left: $spacing;
-  }
-}
-
-.c-bodybox > ol:not([class]),
-.c-bodybox :not(li) > ol:not([class]),
-.c-bodybox .ol-list--roman {
-  @include mq(desktop) {
-    margin-left: $spacing--large;
-  }
-}
-
 .c-bodybox {
   .c-figure {
     width: 100% !important;

package/src/locale/messages-en.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories, subjectTypes } = constants;
+export const { contentTypes, subjectCategories, subjectTypes, WordClass, Transcriptions } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -1327,6 +1327,51 @@ const messages = {
       external: 'External resource',
     },
   },
+  gloss: {
+    examples: 'Examples',
+    wordClass: 'Word class',
+    transcriptions: {
+      traditional: 'Traditional spelling',
+      pinyin: 'Pinyin',
+    },
+  },
+  wordClass: {
+    [WordClass.WordClass.Adjective]: 'Adjective',
+    [WordClass.WordClass.Adverb]: 'Adverb',
+    [WordClass.WordClass.ProperNoun]: 'Proper Noun',
+    [WordClass.WordClass.Auxiliary]: 'Auxiliary',
+    [WordClass.WordClass.Complement]: 'Complement',
+    [WordClass.WordClass.Conjunction]: 'Conjunction',
+    [WordClass.WordClass.Coverb]: 'Coverb',
+    [WordClass.WordClass.Determiner]: 'Determiner',
+    [WordClass.WordClass.Interjection]: 'Interjection',
+    [WordClass.WordClass.Quantifier]: 'Quantifier',
+    [WordClass.WordClass.Marker]: 'Marker',
+    [WordClass.WordClass.ModalVerb]: 'Modal Verb',
+    [WordClass.WordClass.MeasureWord]: 'Measure Word',
+    [WordClass.WordClass.Noun]: 'Noun',
+    [WordClass.WordClass['Noun-zh']]: 'Noun',
+    [WordClass.WordClass.NounPhrase]: 'Noun Phrase',
+    [WordClass.WordClass.Onomatopoeia]: 'Onomatopoeia',
+    [WordClass.WordClass.Particle]: 'Particle',
+    [WordClass.WordClass.Demonstrative]: 'Demonstrative',
+    [WordClass.WordClass.PersonalPronoun]: 'Personal Pronoun',
+    [WordClass.WordClass.Preposition]: 'Preposition',
+    [WordClass.WordClass.Pronoun]: 'Pronoun',
+    [WordClass.WordClass.QuestionWord]: 'Question Word',
+    [WordClass.WordClass.LocationWord]: 'Location Word',
+    [WordClass.WordClass.Suffix]: 'Suffix',
+    [WordClass.WordClass.Numeral]: 'Numeral',
+    [WordClass.WordClass.TimeWord]: 'Time word',
+    [WordClass.WordClass.TimeExpression]: 'Time Expression',
+    [WordClass.WordClass.StativeVerb]: 'Stative Verb',
+    [WordClass.WordClass.SubordinatingConjunction]: 'Subordinating Conjunction',
+    [WordClass.WordClass.ExclamationWord]: 'Exclamation Word',
+    [WordClass.WordClass.Expression]: 'Expression',
+    [WordClass.WordClass.Verb]: 'Verb',
+    [WordClass.WordClass.VerbComplement]: 'Verb-Complement',
+    [WordClass.WordClass.VerbObject]: 'Verb-Object',
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories, subjectTypes } = constants;
+export const { contentTypes, subjectCategories, subjectTypes, WordClass } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -1323,6 +1323,51 @@ const messages = {
       external: 'Ekstern ressurs',
     },
   },
+  gloss: {
+    examples: 'Eksempler',
+    wordClass: 'Ordklasse',
+    transcriptions: {
+      traditional: 'Tradisjonell skrivemåte',
+      pinyin: 'Pinyin',
+    },
+  },
+  wordClass: {
+    [WordClass.WordClass.Adjective]: 'Adjektiv',
+    [WordClass.WordClass.Adverb]: 'Adverb',
+    [WordClass.WordClass.ProperNoun]: 'Egennavn',
+    [WordClass.WordClass.Auxiliary]: 'Hjelpeord',
+    [WordClass.WordClass.Complement]: 'Komplement',
+    [WordClass.WordClass.Conjunction]: 'Konjunksjon',
+    [WordClass.WordClass.Coverb]: 'Koverb',
+    [WordClass.WordClass.Determiner]: 'Bestemmerord',
+    [WordClass.WordClass.Interjection]: 'Interjeksjon',
+    [WordClass.WordClass.Quantifier]: 'Kvantor',
+    [WordClass.WordClass.Marker]: 'Markør',
+    [WordClass.WordClass.ModalVerb]: 'Modalverb',
+    [WordClass.WordClass.MeasureWord]: 'Målord',
+    [WordClass.WordClass.Noun]: 'Substantiv',
+    [WordClass.WordClass['Noun-zh']]: 'Nomen',
+    [WordClass.WordClass.NounPhrase]: 'Nominalfrase',
+    [WordClass.WordClass.Onomatopoeia]: 'Onomatopoetikon',
+    [WordClass.WordClass.Particle]: 'Partikkel',
+    [WordClass.WordClass.Demonstrative]: 'Pekeord',
+    [WordClass.WordClass.PersonalPronoun]: 'Personlig Pronomen',
+    [WordClass.WordClass.Preposition]: 'Preposisjon',
+    [WordClass.WordClass.Pronoun]: 'Pronomen',
+    [WordClass.WordClass.QuestionWord]: 'Spørreord',
+    [WordClass.WordClass.LocationWord]: 'Stedsord',
+    [WordClass.WordClass.Suffix]: 'Suffiks',
+    [WordClass.WordClass.Numeral]: 'Tallord',
+    [WordClass.WordClass.TimeWord]: 'Tidsord',
+    [WordClass.WordClass.TimeExpression]: 'Tidsuttrykk',
+    [WordClass.WordClass.StativeVerb]: 'Tilstandsverb',
+    [WordClass.WordClass.SubordinatingConjunction]: 'Subjunksjon',
+    [WordClass.WordClass.ExclamationWord]: 'Utropsord',
+    [WordClass.WordClass.Expression]: 'Uttrykk',
+    [WordClass.WordClass.Verb]: 'Verb',
+    [WordClass.WordClass.VerbComplement]: 'Verb-Komplement',
+    [WordClass.WordClass.VerbObject]: 'Verb-Objekt',
+  },
 };
 
 export default messages;