@ndla/ui 47.1.2 → 47.2.1

package/src/TagSelector/TagSelector.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+import TagSelector from './TagSelector';
+import { defaultParameters } from '../../../../stories/defaults';
+
+/**
+ * Komponent for å tagge noe, primært tiltenkt Min NDLA
+ */
+export default {
+  title: 'Patterns/TagSelector',
+  component: TagSelector,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  argTypes: {
+    onChange: { control: false },
+    onCreateTag: { control: false },
+    tags: { control: false },
+    selected: { control: false },
+  },
+  args: {
+    label: 'Select tags',
+    labelHidden: false,
+  },
+} as Meta<typeof TagSelector>;
+
+const Container = styled.div`
+  margin: 10px auto;
+  max-width: 600px;
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TagSelectorStory: StoryFn<typeof TagSelector> = (args) => {
+  const dummyData = [
+    'Cat',
+    'Dog',
+    'Fish',
+    'Dinosaur',
+    'Frog',
+    'Dragon',
+    'Lion',
+    'Snake',
+    'Alligator',
+    'Antelope',
+    'Bear',
+    'Baboon',
+    'Kangaroo',
+    'Scorpion',
+    'Goose',
+    'Fox',
+    'Donkey',
+    'Chicken',
+  ];
+  const [exampleTags, setExampleTags] = useState<string[]>(dummyData);
+  const [exampleTagsSelected, setExampleTagsSelected] = useState<string[]>(dummyData.slice(0, 0));
+
+  return (
+    <Container>
+      <TagSelector
+        label={args.label}
+        tags={exampleTags}
+        selected={exampleTagsSelected}
+        onChange={(tags: string[]) => {
+          setExampleTagsSelected(tags);
+        }}
+        onCreateTag={(newTagName: string) => {
+          setExampleTags((prevTags) => [...prevTags, newTagName]);
+          setExampleTagsSelected((prevSelectedTags) => [...prevSelectedTags, newTagName]);
+        }}
+      />
+    </Container>
+  );
+};
+
+TagSelectorStory.storyName = 'TagSelect';

package/src/index.ts

@@ -9,6 +9,8 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
+export { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';
+export { default as FramedContent } from './FramedContent';
 export { default as SectionHeading } from './SectionHeading';
 export {
   ConceptNotionV2,

package/src/locale/messages-en.ts

@@ -516,6 +516,11 @@ const messages = {
   subject: {
     associatedTopics: 'Associated topics',
   },
+  subjectFrontPage: {
+    buildsOn: 'Builds on',
+    connectedTo: 'Common programme subject with',
+    leadsTo: 'Leads to',
+  },
   accordion: {
     closeAll: 'Close all',
     openAll: 'Open all',
@@ -1098,6 +1103,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'If any information is wrong, it must be updated by the host organization/school owner the user belongs to. An overview of available user support can be found here: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'New feature',
   slateBlockMenu: {
@@ -1274,8 +1280,11 @@ const messages = {
     },
     myProfile: {
       title: 'My Profile',
-      disclaimerTitle: 'Where is my picture and name used?',
-      disclaimerText: 'Your picture and name are displayed when you participate in discussions in the arena.',
+      disclaimerTitle: { employee: 'Where is my picture and name used?', student: 'Where is my name used?' },
+      disclaimerText: {
+        employee: 'Your picture and name are displayed when you participate in discussions in the arena.',
+        student: 'Your name is only displayed for you',
+      },
       preferenceTitle: 'Choose whether you want to display name when sharing a folder',
       preferenceText:
         'Here you can choose whether you want to display your name when you share a folder. The selected option applies to all your folders and can be changed later. If you later change the option, your name will appear on all your shared folders.',
@@ -1340,8 +1349,8 @@ const messages = {
     help: 'Help',
   },
   programmes: {
-    header: 'View our educational programmes',
-    description: 'We strive to offer the best learning resources within traditional and new media.',
+    header: 'What do you want to learn today?',
+    description: 'Choose a programme to see your subjects',
     grades: 'Grades',
     accordionHeader: 'All educational programmes',
   },

package/src/locale/messages-nb.ts

@@ -515,6 +515,11 @@ const messages = {
   subject: {
     associatedTopics: 'Tilhørende emner',
   },
+  subjectFrontPage: {
+    buildsOn: 'Bygger på',
+    connectedTo: 'Felles programfag sammen med',
+    leadsTo: 'Leder til',
+  },
   accordion: {
     closeAll: 'Lukk alle',
     openAll: 'Åpne alle',
@@ -1097,6 +1102,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {
@@ -1270,8 +1276,14 @@ const messages = {
     },
     myProfile: {
       title: 'Min Profil',
-      disclaimerTitle: 'Hvor brukes bildet og navnet mitt?',
-      disclaimerText: 'Bilde og navn vises når du deltar i diskusjoner i arenaen.',
+      disclaimerTitle: {
+        employee: 'Hvor brukes bildet og navnet mitt?',
+        student: 'Hvor brukes navnet mitt?',
+      },
+      disclaimerText: {
+        employee: 'Bilde og navn vises når du deltar i diskusjoner i arenaen.',
+        student: 'Navnet ditt vises bare for deg selv når du er logget inn.',
+      },
       preferenceTitle: 'Velg om du vil vise navn når du deler en mappe',
       preferenceText:
         'Her kan du selv velge om du vil vise navnet ditt når du deler en mappe. Valget gjelder for alle mappene dine og kan endres senere. Dersom du endrer vil navnet ditt vises på alle dine delte mapper.',
@@ -1336,8 +1348,8 @@ const messages = {
     help: 'Hjelp',
   },
   programmes: {
-    header: 'Se våre utdanningsprogram',
-    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
+    header: 'Hva vil du lære om i dag?',
+    description: 'Velg utdanningsprogram for å se dine fag',
     grades: 'Trinn',
     accordionHeader: 'Alle utdanningsprogram',
   },

package/src/locale/messages-nn.ts

@@ -515,6 +515,11 @@ const messages = {
   subject: {
     associatedTopics: 'Tilhøyrande emne',
   },
+  subjectFrontPage: {
+    buildsOn: 'Byggjer på',
+    connectedTo: 'Felles programfag saman med',
+    leadsTo: 'Leier til',
+  },
   accordion: {
     closeAll: 'Lukk alle',
     openAll: 'Åpne alle',
@@ -1097,6 +1102,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {
@@ -1270,8 +1276,14 @@ const messages = {
     },
     myProfile: {
       title: 'Min Profil',
-      disclaimerTitle: 'Kvar blir biletet og namnet mitt brukt?',
-      disclaimerText: 'Bilete og namn vert vist når du deltek i diskusjonar i arenaen.',
+      disclaimerTitle: {
+        employee: 'Kvar blir biletet og namnet mitt brukt?',
+        student: 'Kvar blir namnet mitt brukt?',
+      },
+      disclaimerText: {
+        employee: 'Bilete og namn vert vist når du deltek i diskusjonar i arenaen.',
+        student: 'Namnet ditt blir berre vist for deg sjølv når du er logga inn.',
+      },
       preferenceTitle: 'Vel om du vil vise namn når du deler ei mappe',
       preferenceText:
         'Her kan du sjølv velje om du vil vise namnet ditt når du deler ei mappe. Valet gjeld for alle mappene dine og kan endrast seinare. Dersom du endrar vil namnet ditt visast på alle dine delte mapper.',
@@ -1336,8 +1348,8 @@ const messages = {
     help: 'Hjelp',
   },
   programmes: {
-    header: 'Se våre utdanningsprogram',
-    description: 'Vi ønsker å tilby dei beste læringsressursane innan tradisjonelle og nye media.',
+    header: 'Kva vil du lære om i dag?',
+    description: 'Vel utdanningsprogram for å sjå faga dine',
     grades: 'Trinn',
     accordionHeader: 'Alle utdanningsprogram',
   },

package/src/locale/messages-se.ts

@@ -516,6 +516,11 @@ const messages = {
   subject: {
     associatedTopics: 'Gullevaš fáttát',
   },
+  subjectFrontPage: {
+    buildsOn: 'Duddjo dása',
+    connectedTo: 'Oktasaš prográmmafáddán lea',
+    leadsTo: 'Dát doalvu',
+  },
   accordion: {
     closeAll: 'Govčča buot',
     openAll: 'Raba buot',
@@ -1098,6 +1103,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Jus leat boasttudieđut, de ferte organisašuvdna/skuvlaeaiggát masá geavaheaddji gullá ođasmahttit dan. Visogova geavaheaddjidoarjaga ektui gávnnat dás: ',
+    moderator: 'Muddenplána',
   },
   checkOutNewFeature: 'Iskka ođđa doaibmilvuođa',
   slateBlockMenu: {
@@ -1270,8 +1276,11 @@ const messages = {
     },
     myProfile: {
       title: 'Mu profiila',
-      disclaimerTitle: 'Gos geavahit mu gova ja mu nama?',
-      disclaimerText: 'Govva ja namma čájehuvvojit go searvat digaštallamii arenain.',
+      disclaimerTitle: { employee: 'Gos geavahit mu gova ja mu nama?', student: 'Gos geavahit mu nama?' },
+      disclaimerText: {
+        employee: 'Govva ja namma čájehuvvojit go searvat digaštallamii arenain.',
+        student: 'Du namma čájehuvvo dušše go leat sisačálihuvvon',
+      },
       preferenceTitle: 'Vállje jos namma čájehuvvo máhpa juohkkedettiin',
       preferenceText:
         'Dás válljet jos iežat namma čájehuvvo juohkkedettiin máhpa. Dát molssaeaktu guoská buot máhpaide ja sáhttá rievdaduvvot maŋŋil. Jos rievdadat dán, de čájehuvvo du namma buot juogaduvvon máhpain.',

package/src/locale/messages-sma.ts

@@ -516,6 +516,11 @@ const messages = {
   subject: {
     associatedTopics: 'Teemah mah govlehtuvvieh',
   },
+  subjectFrontPage: {
+    buildsOn: 'Bigkie bæjjese',
+    connectedTo: 'Tjåenghkies programmefaage aalkoealmetjidie',
+    leadsTo: 'Goh ryökneme',
+  },
   accordion: {
     closeAll: 'Dahph gaajhkh',
     openAll: 'Rïhpesth gaajhkh',
@@ -1101,6 +1106,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+    moderator: 'Moderatijve',
   },
   checkOutNewFeature: 'Gïehtjh orre funksjonaliteetem',
   slateBlockMenu: {
@@ -1275,8 +1281,11 @@ const messages = {
     },
     myProfile: {
       title: 'Mov Profijle',
-      disclaimerTitle: 'Gusnie guvvie jïh nomme åtnasuvvieh?',
-      disclaimerText: 'Guvvie jïh nomme våajnoes sjidtieh gosse meatan digkiedimmesne sijjesne.',
+      disclaimerTitle: { employee: 'Gusnie guvvie jïh nomme åtnasuvvieh?', student: 'Gusnie mov nomme' },
+      disclaimerText: {
+        employee: 'Guvvie jïh nomme våajnoes sjidtieh gosse meatan digkiedimmesne sijjesne.',
+        student: 'Dov nomme ajve tjaalasåvva dutnjien gosse sïjse loggedh',
+      },
       preferenceTitle: 'Sjïehtedh jis edtja nommem vuesiehtidh gosse maabpam juekedh',
       preferenceText:
         'Daesnie jïjtje veeljh mejtie sïjhth dov nommem vuesiehtidh gosse maabpam juekedh . Daate veeljeme lea gaajhkine dov maabpojne, jïh maahta dam mænngan jarkelidh. Jis jeatjahdahtah , dov nomme sæjhta våajnoes årrodh gaajhkine dov joekedamme maabpojne.',
@@ -1341,10 +1350,10 @@ const messages = {
     help: 'Hjelp',
   },
   programmes: {
-    header: 'Se våre utdanningsprogram',
-    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
-    grades: 'Trinn',
-    accordionHeader: 'Alle utdanningsprogram',
+    header: 'Maam sïjhth daan biejjien lïeredh ?',
+    description: 'Veeljh ööhpehtimmieprogrammem juktie dov faagide vuartasjidh',
+    grades: 'Daltesasse',
+    accordionHeader: 'Gaajhkh ööhpehtimmieprogrammh',
   },
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',

package/lib/Image/LazyLoadImage.d.ts

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-interface Props {
-    alt: string;
-    src: string;
-    sizes?: string;
-    contentType?: string;
-    srcSet?: string;
-    lazyLoadSrc?: string;
-}
-declare const LazyLoadImage: ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default LazyLoadImage;

package/src/Image/LazyLoadImage.tsx

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-interface Props {
-  alt: string;
-  src: string;
-  sizes?: string;
-  contentType?: string;
-  srcSet?: string;
-  lazyLoadSrc?: string;
-}
-// Lazyload image with lazysizes (https://github.com/aFarkas/lazysizes)
-const LazyLoadImage = ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }: Props) => (
-  <>
-    <noscript key="noscript">
-      <img alt={alt} src={`${src}`} srcSet={srcSet} sizes={sizes} {...rest} />
-    </noscript>
-    <img
-      alt={alt}
-      key="img"
-      style={{ width: '100%' }}
-      className="lazyload"
-      src={lazyLoadSrc}
-      data-src={src}
-      data-src-set={srcSet}
-      data-sizes={sizes}
-      {...rest}
-    />
-  </>
-);
-
-export default LazyLoadImage;

package/src/Resource/Resource.stories.tsx

@@ -1,81 +0,0 @@
-/**
- * Copyright (c) 2022-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 { Meta, StoryFn } from '@storybook/react';
-import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
-import { ButtonV2, IconButtonV2 } from '@ndla/button';
-import { HorizontalMenu } from '@ndla/icons/contentType';
-import { Pencil } from '@ndla/icons/action';
-import { DeleteForever } from '@ndla/icons/editor';
-import ListResource from './ListResource';
-import { defaultParameters } from '../../../../stories/defaults';
-
-const StoryResourceMenu = () => (
-  <DropdownMenu>
-    <DropdownTrigger>
-      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
-        <HorizontalMenu />
-      </IconButtonV2>
-    </DropdownTrigger>
-    <DropdownContent>
-      <DropdownItem>
-        <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
-          <Pencil />
-          Rediger
-        </ButtonV2>
-      </DropdownItem>
-      <DropdownItem>
-        <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
-          <DeleteForever />
-          Slett
-        </ButtonV2>
-      </DropdownItem>
-    </DropdownContent>
-  </DropdownMenu>
-);
-
-export default {
-  title: 'Components/Resources/ListResource',
-  component: ListResource,
-  tags: ['autodocs'],
-  parameters: {
-    ...defaultParameters,
-  },
-  argTypes: {
-    resourceImage: {
-      control: false,
-    },
-    resourceTypes: {
-      control: false,
-    },
-    headingLevel: {
-      control: false,
-    },
-    menu: {
-      control: false,
-    },
-  },
-  args: {
-    id: '1234',
-    link: '',
-    title: 'Tittel til ressurs',
-    resourceImage: {
-      src: '',
-      alt: '',
-    },
-    resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
-    menu: <StoryResourceMenu />,
-    tags: ['tag', 'tag', 'tag', 'tag'],
-  },
-} as Meta<typeof ListResource>;
-
-export const ListResourceStory: StoryFn<typeof ListResource> = (args) => {
-  return <ListResource {...args} />;
-};
-
-ListResourceStory.storyName = 'ListResource';