@ndla/ui 47.1.3 → 47.3.0

package/lib/locale/messages-nb.d.ts

@@ -225,8 +225,14 @@ declare const messages: {
         };
         myProfile: {
             title: string;
-            disclaimerTitle: string;
-            disclaimerText: string;
+            disclaimerTitle: {
+                employee: string;
+                student: string;
+            };
+            disclaimerText: {
+                employee: string;
+                student: string;
+            };
             preferenceTitle: string;
             preferenceText: string;
             editButtonText: string;
@@ -799,6 +805,11 @@ declare const messages: {
     subject: {
         associatedTopics: string;
     };
+    subjectFrontPage: {
+        buildsOn: string;
+        connectedTo: string;
+        leadsTo: string;
+    };
     accordion: {
         closeAll: string;
         openAll: string;

package/lib/locale/messages-nb.js

@@ -484,6 +484,11 @@ var messages = _objectSpread(_objectSpread({
   subject: {
     associatedTopics: 'Tilhørende emner'
   },
+  subjectFrontPage: {
+    buildsOn: 'Bygger på',
+    connectedTo: 'Felles programfag sammen med',
+    leadsTo: 'Leder til'
+  },
   accordion: {
     closeAll: 'Lukk alle',
     openAll: 'Åpne alle'
@@ -1229,8 +1234,14 @@ var messages = _objectSpread(_objectSpread({
     },
     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.',
       editButtonText: 'Endre profilbilde',
@@ -1294,8 +1305,8 @@ var messages = _objectSpread(_objectSpread({
     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/lib/locale/messages-nn.d.ts

@@ -225,8 +225,14 @@ declare const messages: {
         };
         myProfile: {
             title: string;
-            disclaimerTitle: string;
-            disclaimerText: string;
+            disclaimerTitle: {
+                employee: string;
+                student: string;
+            };
+            disclaimerText: {
+                employee: string;
+                student: string;
+            };
             preferenceTitle: string;
             preferenceText: string;
             editButtonText: string;
@@ -799,6 +805,11 @@ declare const messages: {
     subject: {
         associatedTopics: string;
     };
+    subjectFrontPage: {
+        buildsOn: string;
+        connectedTo: string;
+        leadsTo: string;
+    };
     accordion: {
         closeAll: string;
         openAll: string;

package/lib/locale/messages-nn.js

@@ -484,6 +484,11 @@ var messages = _objectSpread(_objectSpread({
   subject: {
     associatedTopics: 'Tilhøyrande emne'
   },
+  subjectFrontPage: {
+    buildsOn: 'Byggjer på',
+    connectedTo: 'Felles programfag saman med',
+    leadsTo: 'Leier til'
+  },
   accordion: {
     closeAll: 'Lukk alle',
     openAll: 'Åpne alle'
@@ -1229,8 +1234,14 @@ var messages = _objectSpread(_objectSpread({
     },
     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.',
       editButtonText: 'Endre profilbilete',
@@ -1294,8 +1305,8 @@ var messages = _objectSpread(_objectSpread({
     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/lib/locale/messages-se.d.ts

@@ -225,8 +225,14 @@ declare const messages: {
         };
         myProfile: {
             title: string;
-            disclaimerTitle: string;
-            disclaimerText: string;
+            disclaimerTitle: {
+                employee: string;
+                student: string;
+            };
+            disclaimerText: {
+                employee: string;
+                student: string;
+            };
             preferenceTitle: string;
             preferenceText: string;
             editButtonText: string;
@@ -799,6 +805,11 @@ declare const messages: {
     subject: {
         associatedTopics: string;
     };
+    subjectFrontPage: {
+        buildsOn: string;
+        connectedTo: string;
+        leadsTo: string;
+    };
     accordion: {
         closeAll: string;
         openAll: string;

package/lib/locale/messages-se.js

@@ -484,6 +484,11 @@ var messages = _objectSpread(_objectSpread({
   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'
@@ -1229,8 +1234,14 @@ var messages = _objectSpread(_objectSpread({
     },
     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.',
       editButtonText: 'Rievdat profiilagova',

package/lib/locale/messages-sma.d.ts

@@ -225,8 +225,14 @@ declare const messages: {
         };
         myProfile: {
             title: string;
-            disclaimerTitle: string;
-            disclaimerText: string;
+            disclaimerTitle: {
+                employee: string;
+                student: string;
+            };
+            disclaimerText: {
+                employee: string;
+                student: string;
+            };
             preferenceTitle: string;
             preferenceText: string;
             editButtonText: string;
@@ -799,6 +805,11 @@ declare const messages: {
     subject: {
         associatedTopics: string;
     };
+    subjectFrontPage: {
+        buildsOn: string;
+        connectedTo: string;
+        leadsTo: string;
+    };
     accordion: {
         closeAll: string;
         openAll: string;

package/lib/locale/messages-sma.js

@@ -484,6 +484,11 @@ var messages = _objectSpread(_objectSpread({
   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'
@@ -1229,8 +1234,14 @@ var messages = _objectSpread(_objectSpread({
     },
     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.',
       editButtonText: 'Naemhtie profijleguvviem jarkelidh',
@@ -1294,10 +1305,10 @@ var messages = _objectSpread(_objectSpread({
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "47.1.3",
+  "version": "47.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.29",
-    "@ndla/button": "^12.0.3",
-    "@ndla/carousel": "^4.0.6",
-    "@ndla/core": "^4.2.0",
-    "@ndla/dropdown-menu": "^1.0.9",
-    "@ndla/forms": "^5.0.4",
+    "@ndla/accordion": "^2.2.31",
+    "@ndla/button": "^12.0.5",
+    "@ndla/carousel": "^4.0.8",
+    "@ndla/core": "^4.2.2",
+    "@ndla/dropdown-menu": "^1.0.11",
+    "@ndla/forms": "^5.0.7",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.1.1",
-    "@ndla/licenses": "^7.2.0",
-    "@ndla/modal": "^5.0.3",
-    "@ndla/notion": "^6.0.5",
-    "@ndla/safelink": "^4.1.28",
-    "@ndla/select": "^3.1.1",
-    "@ndla/switch": "^1.1.15",
-    "@ndla/tabs": "^3.1.0",
-    "@ndla/tooltip": "^5.0.3",
-    "@ndla/typography": "^0.2.2",
+    "@ndla/icons": "^4.1.3",
+    "@ndla/licenses": "^7.2.2",
+    "@ndla/modal": "^5.0.5",
+    "@ndla/notion": "^6.0.7",
+    "@ndla/safelink": "^4.1.30",
+    "@ndla/select": "^3.1.3",
+    "@ndla/switch": "^1.1.17",
+    "@ndla/tabs": "^3.1.2",
+    "@ndla/tooltip": "^5.0.5",
+    "@ndla/typography": "^0.2.4",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ad890362eb5b8d8dcd11cb1a214987adec3a823"
+  "gitHead": "6efaf50569b477800eb4a8093eb01c6ea2205479"
 }

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react';
+import Breadcrumb from './Breadcrumb';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const items = [
+  {
+    name: 'Fag',
+    to: '#1',
+  },
+  {
+    name: 'Hovedemne tittel',
+    to: '#2',
+  },
+  {
+    name: 'Underemne tittel',
+    to: '#3',
+  },
+  {
+    name: 'Tittel på side/ressurs',
+    to: '#4',
+  },
+];
+
+export default {
+  title: 'Components/Breadcrumb/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  args: {
+    items: items,
+  },
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+} as Meta<typeof Breadcrumb>;
+
+export const Defalt: StoryObj<typeof Breadcrumb> = {};
+
+export const CollapseFirst: StoryObj<typeof Breadcrumb> = {
+  args: { collapseFirst: true },
+};
+
+export const CollapseLast: StoryObj<typeof Breadcrumb> = {
+  args: { collapseLast: true },
+};
+
+export const AutoCollapse: StoryObj<typeof Breadcrumb> = {
+  args: { autoCollapse: true },
+};
+
+export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
+  args: {
+    renderSeparator: (item, totalCount) => (
+      <div style={{ padding: '0px 12px' }}>
+        {item.index}/{totalCount}
+      </div>
+    ),
+  },
+};
+
+export const CustomItem: StoryObj<typeof Breadcrumb> = {
+  args: {
+    renderItem: (item) => (
+      <div>
+        {item.index}:{item.name}
+      </div>
+    ),
+  },
+};

package/src/Breadcrumb/HomeBreadcrumb.stories.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react';
+import { colors } from '@ndla/core';
+import HomeBreadcrumb from './HomeBreadcrumb';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const items = [
+  {
+    name: 'Fag',
+    to: '#1',
+  },
+  {
+    name: 'Hovedemne tittel',
+    to: '#2',
+  },
+  {
+    name: 'Underemne tittel',
+    to: '#3',
+  },
+  {
+    name: 'Tittel på side/ressurs',
+    to: '#4',
+  },
+];
+
+export default {
+  title: 'Components/Breadcrumb/HomeBreadcrumb',
+  component: HomeBreadcrumb,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    items: items,
+  },
+} as Meta<typeof HomeBreadcrumb>;
+
+export const Default: StoryObj<typeof HomeBreadcrumb> = {};
+
+export const Light: StoryObj<typeof HomeBreadcrumb> = {
+  args: { light: true },
+  decorators: [
+    (Story) => (
+      <div style={{ backgroundColor: colors.brand.primary }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/ContentLoader/ContentLoader.stories.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2018-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, StoryObj } from '@storybook/react';
+import ContentLoader from '.';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Components/ContentLoader',
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    speed: 2,
+  },
+  argTypes: {
+    children: { control: false },
+  },
+  component: ContentLoader,
+} as Meta<typeof ContentLoader>;
+
+export const ImageOrVideo: StoryObj<typeof ContentLoader> = {
+  args: {
+    width: 1000,
+    height: 750,
+    children: (
+      <>
+        <rect x="0" y="0" rx="3" ry="3" width="800" height="600" />
+        <rect x="20" y="610" rx="3" ry="3" width="600" height="30" />
+        <rect x="20" y="650" rx="3" ry="3" width="400" height="30" />
+        <circle cx="30" cy="700" r="15" fill="purple" />
+        <circle cx="70" cy="700" r="15" fill="purple" />
+        <circle cx="110" cy="700" r="15" fill="purple" />
+      </>
+    ),
+  },
+};
+
+export const Article: StoryObj<typeof ContentLoader> = {
+  args: {
+    width: 1000,
+    height: 1050,
+    children: (
+      <>
+        <rect x="100" y="0" rx="3" ry="3" width="800" height="60" />
+        <rect x="100" y="100" rx="3" ry="3" width="800" height="25" />
+        <rect x="100" y="140" rx="3" ry="3" width="800" height="25" />
+        <rect x="100" y="180" rx="3" ry="3" width="400" height="25" />
+        <rect x="0" y="260" rx="3" ry="3" width="1000" height="600" />
+        <rect x="100" y="900" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="930" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="970" rx="3" ry="3" width="800" height="20" />
+        <rect x="100" y="1000" rx="3" ry="3" width="600" height="20" />
+      </>
+    ),
+  },
+};

package/src/DefinitionList/DefinitionDescription.tsx

@@ -7,11 +7,10 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts } from '@ndla/core';
+import { fonts } from '@ndla/core';
 import { forwardRef, HTMLAttributes } from 'react';
 
 const StyledDD = styled.dd`
-  color: ${colors.text.light};
   font-weight: ${fonts.weight.normal};
   ${fonts.sizes('18px', '29px')};
 `;

package/src/DefinitionList/DefinitionTerm.tsx

@@ -7,11 +7,10 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts } from '@ndla/core';
+import { fonts } from '@ndla/core';
 import { forwardRef, HTMLAttributes } from 'react';
 
 const StyledDT = styled.dt`
-  color: ${colors.text.primary};
   font-weight: ${fonts.weight.bold};
   ${fonts.sizes('18px', '29px')};
 `;