Merge branch 'main' of https://github.com/digitalservicebund/ris-ui i…

…nto feature/accordion

.storybook/preview.ts

@@ -7,6 +7,7 @@ import ConfirmationService from "primevue/confirmationservice";
 import ToastService from "primevue/toastservice";
 import "../public/fonts.css";
 import { RisUiTheme } from "../src/primevue";
+import { deDE } from "../src/config/locale";
 
 initialize({
   serviceWorker: {
@@ -21,6 +22,7 @@ setup((app) => {
   app.use(PrimeVue, {
     pt: RisUiTheme,
     unstyled: true,
+    locale: deDE,
   });
 
   app.use(ConfirmationService);

.talismanrc

@@ -9,3 +9,5 @@ fileignoreconfig:
     checksum: ceb00460bb36a9b13ccbbc927598aa8757913d04d518f5092a9aa6926261cdc3
   - filename: public/mockServiceWorker.js
     checksum: 4ad535ab9521e492ed376b639958d5987e09280e3b8f77cdca109a0447e8c7d8
+  - filename: src/config/locale.ts
+    checksum: bce8adac9f7e05e5ed3d339f9b9a9d8bd2234a4663ddb1eafd110127cbbe4d9b

README.md

@@ -19,24 +19,78 @@ npm install vue primevue tailwindcss
 npm install @digitalservicebund/ris-ui
 ```
 
-## Usage
+### Vue setup
 
 Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
 ```diff
   // main.ts
   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
-+ import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
++ import { RisUiTheme, RisUiLocale } from "@digitalservicebund/ris-ui/primevue";
 + import "@digitalservicebund/ris-ui/primevue/style.css";
 + import "@digitalservicebund/ris-ui/fonts.css";
 
   const app = createApp().use(PrimeVue, {
 +   unstyled: true,
 +   pt: RisUiTheme,
++   locale: RisUiLocale.deDE
   })
 ```
 
+### Nuxt setup
+
+If using Nuxt, skip the Vue setup above.
+
+Install the Nuxt PrimeVue module:
+
+```sh
+npm install @primevue/nuxt-module
+```
+
+Add the PrimeVue module and configure it in `nuxt.config.ts`:
+
+```diff
+  // nuxt.config.ts
+  export default defineNuxtConfig({
+    // your other configuration
+    modules: [
++     "@primevue/nuxt-module",
+    ],
++   primevue: {
++      usePrimeVue: false, // configured in plugins/ris-ui.ts
++   },
+  })
+```
+
+Add a new Nuxt plugin to configure PrimeVue:
+
+```typescript
+// plugins/ris-ui.ts
+import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
+import PrimeVue from "primevue/config";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(PrimeVue, {
+    pt: RisUiTheme,
+    unstyled: true,
+  });
+});
+```
+
+Finally, add the styles (e.g. `assets/main.css`):
+
+```css
+@import "@digitalservicebund/ris-ui/primevue/style.css";
+@import "@digitalservicebund/ris-ui/fonts.css";
+
+/* Your other CSS */
+```
+
+If not using Tailwind, you may also add these styles directly to the `css` section of `nuxt.config.ts`.
+
+## Tailwind usage
+
 If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
 
 ```diff
@@ -51,6 +105,25 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
   };
 ```
 
+To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration:
+
+See https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files
+
+### Using Nuxt
+
+You may add the `postcss-import` module to your `nuxt.config.ts` file:
+
+```diff
+  // nuxt.config.ts
+  postcss: {
+    plugins: {
++     "postcss-import": {},
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+```
+
 ## Development
 
 To make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) along with npm installed on your machine.

lefthook.yml

@@ -12,16 +12,13 @@ pre-commit:
         (echo "Verify the content and fix it with: talisman --githook pre-commit --interactive"; exit 1)
 
     check-format-frontend:
-      root: frontend/
       run: npm run --silent prettier:fix {staged_files} && git add {staged_files}
 
     lint-frontend:
-      root: frontend/
       glob: "*.{ts,js,vue}"
       run: npm run --silent eslint:fix {staged_files} && git add {staged_files}
 
     typecheck-frontend:
-      root: frontend/
       glob: "*.{ts,vue}"
       run: npm run --silent typecheck && git add {staged_files}
 

src/config/locale.ts

@@ -0,0 +1,157 @@
+import { PrimeVueLocaleOptions } from "primevue/config";
+
+export const deDE: PrimeVueLocaleOptions = {
+  startsWith: "Beginnt mit",
+  contains: "Enthält",
+  notContains: "Enthält nicht",
+  endsWith: "Endet mit",
+  equals: "Gleich",
+  notEquals: "Ungleich",
+  noFilter: "Kein Filter",
+  lt: "Weniger als",
+  lte: "Weniger oder gleich",
+  gt: "Größer als",
+  gte: "Größer oder gleich",
+  dateIs: "Datum ist",
+  dateIsNot: "Datum ist nicht",
+  dateBefore: "Datum ist vor",
+  dateAfter: "Datum ist nach",
+  clear: "Löschen",
+  apply: "Anwenden",
+  matchAll: "Alle erfüllen",
+  matchAny: "Beliebige erfüllen",
+  addRule: "Regel hinzufügen",
+  removeRule: "Regel entfernen",
+  accept: "Ja",
+  reject: "Nein",
+  choose: "Auswählen",
+  upload: "Hochladen",
+  cancel: "Abbrechen",
+  completed: "Abgeschlossen",
+  pending: "Ausstehend",
+  fileSizeTypes: ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+  dayNames: [
+    "Sonntag",
+    "Montag",
+    "Dienstag",
+    "Mittwoch",
+    "Donnerstag",
+    "Freitag",
+    "Samstag",
+  ],
+  dayNamesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+  dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+  monthNames: [
+    "Januar",
+    "Februar",
+    "März",
+    "April",
+    "Mai",
+    "Juni",
+    "Juli",
+    "August",
+    "September",
+    "Oktober",
+    "November",
+    "Dezember",
+  ],
+  monthNamesShort: [
+    "Jan",
+    "Feb",
+    "Mär",
+    "Apr",
+    "Mai",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Okt",
+    "Nov",
+    "Dez",
+  ],
+  chooseYear: "Jahr wählen",
+  chooseMonth: "Monat wählen",
+  chooseDate: "Datum wählen",
+  prevDecade: "Vorheriges Jahrzehnt",
+  nextDecade: "Nächstes Jahrzehnt",
+  prevYear: "Vorheriges Jahr",
+  nextYear: "Nächstes Jahr",
+  prevMonth: "Vorheriger Monat",
+  nextMonth: "Nächster Monat",
+  prevHour: "Vorherige Stunde",
+  nextHour: "Nächste Stunde",
+  prevMinute: "Vorherige Minute",
+  nextMinute: "Nächste Minute",
+  prevSecond: "Vorherige Sekunde",
+  nextSecond: "Nächste Sekunde",
+  am: "vorm.",
+  pm: "nachm.",
+  today: "Heute",
+  weekHeader: "KW",
+  firstDayOfWeek: 1,
+  showMonthAfterYear: false,
+  dateFormat: "dd.mm.yy",
+  weak: "Schwach",
+  medium: "Mittel",
+  strong: "Stark",
+  passwordPrompt: "Passwort eingeben",
+  emptyFilterMessage: "Keine Ergebnisse gefunden",
+  searchMessage: "{0} Ergebnisse verfügbar",
+  selectionMessage: "{0} Elemente ausgewählt",
+  emptySelectionMessage: "Kein Element ausgewählt",
+  emptySearchMessage: "Keine Ergebnisse gefunden",
+  fileChosenMessage: "{0} Dateien",
+  noFileChosenMessage: "Keine Datei ausgewählt",
+  emptyMessage: "Keine Optionen verfügbar",
+  aria: {
+    trueLabel: "Wahr",
+    falseLabel: "Falsch",
+    nullLabel: "Nicht ausgewählt",
+    star: "1 Stern",
+    stars: "{star} Sterne",
+    selectAll: "Alle Elemente ausgewählt",
+    unselectAll: "Alle Elemente abgewählt",
+    close: "Schließen",
+    previous: "Vorherige",
+    next: "Nächste",
+    navigation: "Navigation",
+    scrollTop: "Nach oben scrollen",
+    moveTop: "Nach oben bewegen",
+    moveUp: "Nach oben bewegen",
+    moveDown: "Nach unten bewegen",
+    moveBottom: "Nach unten bewegen",
+    moveToTarget: "Zum Ziel verschieben",
+    moveToSource: "Zur Quelle verschieben",
+    moveAllToTarget: "Alle zum Ziel verschieben",
+    moveAllToSource: "Alle zur Quelle verschieben",
+    pageLabel: "Seite {page}",
+    firstPageLabel: "Erste Seite",
+    lastPageLabel: "Letzte Seite",
+    nextPageLabel: "Nächste Seite",
+    prevPageLabel: "Vorherige Seite",
+    rowsPerPageLabel: "Zeilen pro Seite",
+    jumpToPageDropdownLabel: "Zu Seite springen (Dropdown)",
+    jumpToPageInputLabel: "Zu Seite springen (Eingabe)",
+    selectRow: "Zeile ausgewählt",
+    unselectRow: "Zeile abgewählt",
+    expandRow: "Zeile erweitert",
+    collapseRow: "Zeile reduziert",
+    showFilterMenu: "Filtermenü anzeigen",
+    hideFilterMenu: "Filtermenü ausblenden",
+    filterOperator: "Filteroperator",
+    filterConstraint: "Filterbedingung",
+    editRow: "Zeile bearbeiten",
+    saveEdit: "Bearbeitung speichern",
+    cancelEdit: "Bearbeitung abbrechen",
+    listView: "Listenansicht",
+    gridView: "Gitteransicht",
+    slide: "Folie",
+    slideNumber: "Folie {slideNumber}",
+    zoomImage: "Bild vergrößern",
+    zoomIn: "Vergrößern",
+    zoomOut: "Verkleinern",
+    rotateRight: "Rechts drehen",
+    rotateLeft: "Links drehen",
+    listLabel: "Optionsliste",
+  },
+};

src/primevue/button/button.stories.ts

@@ -20,7 +20,7 @@ const meta: Meta<typeof PrimevueButton> = {
   },
 
   argTypes: {
-    size: { control: "select", options: ["small", "large"] },
+    size: { control: "select", options: [undefined, "large"] },
     severity: { control: "select", options: ["primary", "secondary"] },
   },
 };

src/primevue/button/button.ts

@@ -18,26 +18,26 @@ const button: ButtonPassThroughOptions = {
     const primaryText = tw`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus:border-gray-500 active:border-white active:bg-white disabled:bg-transparent disabled:text-gray-500`;
 
     // Sizes
-    const size = props.size ?? "small";
-    let small = tw`ris-body2-bold h-48 py-4`;
+    const size = props.size ?? "normal";
+    let normal = tw`ris-body2-bold h-48 py-4`;
     let large = tw`ris-body1-bold h-64 py-4`;
 
     // Icon only
     if (instance.hasIcon && !props.label) {
-      small = tw`${small} w-48 px-4`;
+      normal = tw`${normal} w-48 px-4`;
       large = tw`${large} w-64 px-4`;
     }
 
     // Label only or label + icon
     else {
-      small = tw`${small} px-16`;
+      normal = tw`${normal} px-16`;
       large = tw`${large} px-24`;
     }
 
     return {
       class: {
         [base]: true,
-        [small]: size === "small",
+        [normal]: size === "normal",
         [large]: size === "large",
         [primary]: !props.text && severity === "primary",
         [secondary]: !props.text && severity === "secondary",
@@ -53,13 +53,20 @@ const button: ButtonPassThroughOptions = {
     },
   }),
 
-  loadingIcon: ({ props }) => ({
-    class: {
-      [tw`animate-spin`]: true,
-      [tw`h-24 w-24`]: props.size === "large",
-      [tw`h-[1.34em] w-[1.34em]`]: !props.size || props.size === "small",
-    },
-  }),
+  loadingIcon: ({ props }) => {
+    // Size
+    const size = props.size ?? "normal";
+    const normal = tw`h-[1.34em] w-[1.34em]`;
+    const large = tw`h-24 w-24`;
+
+    return {
+      class: {
+        [tw`animate-spin`]: true,
+        [normal]: size === "normal",
+        [large]: size === "large",
+      },
+    };
+  },
 };
 
 export default button;

src/primevue/confirmDialog/confirmDialog.stories.ts

@@ -49,7 +49,7 @@ export const Default: Story = {
         </template>
       </ConfirmDialog>
 
-      <PrimevueButton @click="showConfirm()" label="Save" />
+      <PrimevueButton @click="showConfirm()" label="Show dialog" />
     `,
   }),
 };