Catalogue props cleanup

book/src/SUMMARY.md

@@ -12,6 +12,7 @@
     - [Styling](development/styling.md)
     - [Making a release](development/releasing.md)
 - [Release notes](releases/README.md)
+    - [Version 0.5.4](releases/v0.5.4.md)
     - [Version 0.5.3](releases/v0.5.3.md)
     - [Version 0.5.2](releases/v0.5.2.md)
     - [Version 0.5.1](releases/v0.5.1.md)

book/src/releases/v0.5.4.md

@@ -0,0 +1,28 @@
+# Version 0.5.4
+
+## Migration guide
+
+If you are using the collapsible catalogue feature, the texts for the expand/collapse button are now no longer specified as props:
+
+```diff
+ <lens-catalogue
+-    texts={{
+-        collapseButtonTitle: 'My custom expand text',
+-        expandButtonTitle: 'My custom collapse text',
+-    }}
+     toggle={{ collapsable: true }}
+ ></lens-catalogue>
+```
+
+If you specified any other texts in the `texts` prop you can remove them as well as they are no longer used. The expand/collapse button texts are now specified in the Lens options [as translations](../guide/translations.md):
+
+```json
+"texts": {
+    "catalogue_expand": {
+        "en": "My custom expand text"
+    },
+    "catalogue_collapse": {
+        "en": "My custom collapse text"
+    },
+}
+```

src/components/catalogue/Catalogue.wc.svelte

@@ -5,52 +5,37 @@
 />
 
 <script lang="ts">
-    import { catalogueTextStore } from "../../stores/texts";
     import { catalogue } from "../../stores/catalogue";
-    import type { ToggleAttribute } from "../../types/helpers";
-    import type { CatalogueText } from "../../types/texts";
     import type { Catalogue } from "../../types/catalogue";
     import DataTreeElement from "./DataTreeElement.svelte";
     import { onMount } from "svelte";
     import { lensOptions } from "../../stores/options";
     import { fetchFacetCounts } from "../../stores/facetCounts";
+    import { translate } from "../../helpers/translations";
 
     interface Props {
         treeData?: Catalogue;
-
-        texts?: CatalogueText;
         /**
          * handle the toggle of the catalogue
          */
-        toggle?: ToggleAttribute;
+        toggle?: {
+            collapsable?: boolean;
+            open?: boolean;
+        };
     }
 
     let {
         treeData = [],
-        texts = {},
         toggle = {
             collapsable: true,
             open: false,
         },
     }: Props = $props();
 
-    let toggleTree = $state(toggle.open);
+    let isOpen = $state(toggle.open);
 
     const handleToggle = (): void => {
-        toggleTree = !toggleTree;
-    };
-
-    /**
-     * Initialize the catalogue text store with the given texts
-     */
-    let initializedTexts = {
-        group: texts.group || "Group",
-        collapseButtonTitle: texts.collapseButtonTitle || "Collapse Tree",
-        expandButtonTitle: texts.expandButtonTitle || "Expand Tree",
-        numberInput: {
-            labelFrom: texts.numberInput?.labelFrom || "From",
-            labelTo: texts.numberInput?.labelTo || "to",
-        },
+        isOpen = !isOpen;
     };
 
     /**
@@ -63,13 +48,6 @@
         }
     });
 
-    /**
-     * Initialize the text store with the given texts
-     */
-    $effect(() => {
-        $catalogueTextStore = initializedTexts;
-    });
-
     onMount(() => {
         let didRun = false;
         lensOptions.subscribe((opts) => {
@@ -86,34 +64,34 @@
 <div part="lens-catalogue">
     {#if toggle.collapsable}
         <button
-            part="lens-catalogue-toggle-button {toggle.open
+            part="lens-catalogue-toggle-button {isOpen
                 ? 'lens-catalogue-button-open'
                 : ''}"
             onclick={handleToggle}
         >
             <div
-                part="toggle-button-icon {toggle.open
-                    ? 'toggle-button-open-icon'
-                    : ''}"
+                part="toggle-button-icon {isOpen
+                    ? ''
+                    : 'lens-catalogue-toggle-button-closed-icon'}"
             >
                 &#9660;
             </div>
             <div
-                part="toggle-button-text {toggle.open
+                part="toggle-button-text {isOpen
                     ? 'toggle-button-open-text'
                     : ''}"
             >
-                {toggle.open
-                    ? $catalogueTextStore.collapseButtonTitle
-                    : $catalogueTextStore.expandButtonTitle}
+                {isOpen
+                    ? translate("catalogue_collapse")
+                    : translate("catalogue_expand")}
             </div>
         </button>
     {/if}
-    {#if toggleTree || !toggle.collapsable}
+    {#if isOpen || !toggle.collapsable}
         <div part="lens-catalogue-wrapper">
             <!-- eslint-disable-next-line svelte/require-each-key -->
             {#each $catalogue as Category}
-                <DataTreeElement element={Category} treeOpen={toggle.open} />
+                <DataTreeElement element={Category} treeOpen={isOpen} />
             {/each}
         </div>
     {/if}
@@ -138,7 +116,7 @@
         background-color: var(--button-background-color-hover);
     }
 
-    [part~="toggle-button-open-icon"] {
+    [part~="lens-catalogue-toggle-button-closed-icon"] {
         transform: rotate(180deg);
     }
 

src/helpers/translations.ts

@@ -43,4 +43,12 @@ const lensTranslations: Texts = {
         en: "One of the search fields is empty. Please delete empty search fields or enter search criteria.",
         de: "Eine der Suchleisten ist leer. Löschen Sie leere Suchleisten oder fügen Sie Suchkriterien ein.",
     },
+    catalogue_expand: {
+        en: "Expand Catalogue",
+        de: "Katalog ausklappen",
+    },
+    catalogue_collapse: {
+        en: "Collapse Catalogue",
+        de: "Katalog einklappen",
+    },
 };