@ndla/ui 47.1.3 → 47.2.1

package/lib/Resource/storyComponents.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+export declare const resourceTypesArr: {
+    id: string;
+    name: string;
+}[];
+export declare const StoryResourceMenu: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/Resource/storyComponents.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resourceTypesArr = exports.StoryResourceMenu = void 0;
+var _dropdownMenu = require("@ndla/dropdown-menu");
+var _button = require("@ndla/button");
+var _contentType = require("@ndla/icons/contentType");
+var _action = require("@ndla/icons/action");
+var _editor = require("@ndla/icons/editor");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+var resourceTypesArr = [{
+  id: 'urn:resourcetype:learningPath',
+  name: 'Læringssti'
+}, {
+  id: 'urn:resourcetype:subjectMaterial',
+  name: 'Fagstoff'
+}, {
+  id: 'urn:resourcetype:tasksAndActivities',
+  name: 'Oppgaver og aktiviteter'
+}, {
+  id: 'urn:resourcetype:reviewResource',
+  name: 'Vurderingsressurs'
+}, {
+  id: 'urn:resourcetype:externalResource',
+  name: 'Ekstern læringsressurs'
+}, {
+  id: 'urn:resourcetype:SourceMaterial',
+  name: 'Kildemateriale'
+}];
+exports.resourceTypesArr = resourceTypesArr;
+var StoryResourceMenu = function StoryResourceMenu() {
+  return (0, _jsxRuntime.jsxs)(_dropdownMenu.DropdownMenu, {
+    children: [(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownTrigger, {
+      children: (0, _jsxRuntime.jsx)(_button.IconButtonV2, {
+        "aria-label": "Show more",
+        title: "Show more",
+        variant: "ghost",
+        colorTheme: "light",
+        children: (0, _jsxRuntime.jsx)(_contentType.HorizontalMenu, {})
+      })
+    }), (0, _jsxRuntime.jsxs)(_dropdownMenu.DropdownContent, {
+      children: [(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownItem, {
+        children: (0, _jsxRuntime.jsxs)(_button.ButtonV2, {
+          variant: "ghost",
+          colorTheme: "light",
+          shape: "sharp",
+          size: "small",
+          fontWeight: "normal",
+          children: [(0, _jsxRuntime.jsx)(_action.Pencil, {}), "Rediger"]
+        })
+      }), (0, _jsxRuntime.jsx)(_dropdownMenu.DropdownItem, {
+        children: (0, _jsxRuntime.jsxs)(_button.ButtonV2, {
+          variant: "ghost",
+          colorTheme: "danger",
+          shape: "sharp",
+          size: "small",
+          fontWeight: "normal",
+          children: [(0, _jsxRuntime.jsx)(_editor.DeleteForever, {}), "Slett"]
+        })
+      })]
+    })]
+  });
+};
+exports.StoryResourceMenu = StoryResourceMenu;

package/lib/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+export { ExpandableBox, ExpandableBoxSummary } from './ExpandableBox';
 export { default as FramedContent } from './FramedContent';
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, } from './Embed';

package/lib/index.js

@@ -274,6 +274,18 @@ Object.defineProperty(exports, "ErrorResourceAccessDenied", {
     return _ErrorMessage.ErrorResourceAccessDenied;
   }
 });
+Object.defineProperty(exports, "ExpandableBox", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableBox.ExpandableBox;
+  }
+});
+Object.defineProperty(exports, "ExpandableBoxSummary", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableBox.ExpandableBoxSummary;
+  }
+});
 Object.defineProperty(exports, "ExternalEmbed", {
   enumerable: true,
   get: function get() {
@@ -1252,6 +1264,7 @@ Object.defineProperty(exports, "useSnack", {
     return _SnackBar.useSnack;
   }
 });
+var _ExpandableBox = require("./ExpandableBox");
 var _FramedContent = _interopRequireDefault(require("./FramedContent"));
 var _SectionHeading = _interopRequireDefault(require("./SectionHeading"));
 var _Embed = require("./Embed");

package/lib/locale/messages-en.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-en.js

@@ -486,6 +486,11 @@ var messages = _objectSpread(_objectSpread({
   subject: {
     associatedTopics: 'Associated topics'
   },
+  subjectFrontPage: {
+    buildsOn: 'Builds on',
+    connectedTo: 'Common programme subject with',
+    leadsTo: 'Leads to'
+  },
   accordion: {
     closeAll: 'Close all',
     openAll: 'Open all'
@@ -1231,8 +1236,14 @@ var messages = _objectSpread(_objectSpread({
     },
     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.',
       editButtonText: 'Change profile picture',
@@ -1296,8 +1307,8 @@ var messages = _objectSpread(_objectSpread({
     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/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.2.1",
   "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.6",
     "@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": "4c1fdc46a9a9b9e34ae1429f70d233391a44e54b"
 }

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>
+    ),
+  ],
+};