Merge branch 'main' of https://github.com/SchwarzIT/onyx into joca96/…

…implement-global-event-listener
SchwarzIT · Jul 10, 2024 · 52f2501 · 52f2501
2 parents d627f4d + d838ea8
commit 52f2501
Show file tree

Hide file tree

Showing 47 changed files with 302 additions and 65 deletions.
diff --git a/.changeset/chatty-ducks-play.md b/.changeset/chatty-ducks-play.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSelect): Implement truncation for OnyxSelectOptions
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -28,6 +28,7 @@
     "brown-monkeys-promise",
     "brown-papayas-itch",
     "brown-readers-kneel",
+    "chatty-ducks-play",
     "chatty-seahorses-share",
     "chatty-shrimps-pretend",
     "chilled-bobcats-learn",
@@ -209,6 +210,7 @@
     "soft-maps-jump",
     "sour-candles-beam",
     "sour-ties-impress",
+    "spicy-zoos-remain",
     "spotty-trainers-talk",
     "spotty-worms-leave",
     "stale-dodos-relax",
@@ -257,6 +259,7 @@
     "witty-experts-fold",
     "witty-houses-promise",
     "witty-items-brush",
+    "yellow-dragons-fly",
     "yellow-ligers-shout",
     "young-icons-deny"
   ]

diff --git a/.changeset/spicy-zoos-remain.md b/.changeset/spicy-zoos-remain.md
@@ -0,0 +1,6 @@
+---
+"@sit-onyx/nuxt": minor
+"docs": patch
+---
+
+Support themes in nuxt module
diff --git a/.changeset/yellow-dragons-fly.md b/.changeset/yellow-dragons-fly.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level
diff --git a/apps/demo-app/CHANGELOG.md b/apps/demo-app/CHANGELOG.md
@@ -1,5 +1,19 @@
 # demo-app
 
+## 1.0.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [67a5e50]
+  - [email protected]
+
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [15114f7]
+  - [email protected]
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

diff --git a/apps/demo-app/package.json b/apps/demo-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "demo-app",
   "private": true,
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "scripts": {
     "start": "pnpm run dev",

diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,11 @@
 # docs
 
+## 1.0.0-beta.1
+
+### Patch Changes
+
+- 3385622: Support themes in nuxt module
+
 ## 1.0.0-beta.0
 
 ### Major Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "private": true,
   "scripts": {

diff --git a/apps/docs/src/development/packages/nuxt.md b/apps/docs/src/development/packages/nuxt.md
@@ -38,6 +38,21 @@ If you are also using the [@nuxtjs/i18n](https://i18n.nuxtjs.org/) module, make
 
 Afterwards you're able to just use all onyx components inside your app and the global styles will automatically be set up for you.
 
+## Themes
+
+The module will use the "onyx" theme by default. To change the theme just specify its name inside the config option `onyx.theme`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ["@sit-onyx/nuxt"],
+  onyx: {
+    theme: "lidl",
+  },
+});
+```
+
+For all supported themes see: [Theming](/development/theming#themes)
+
 ## Integration with @nuxtjs/i18n
 
 Onyx features built in translations and the nuxt module extends on that by offering an out of the box integration with [@nuxtjs/i18n](https://i18n.nuxtjs.org/).

diff --git a/apps/docs/src/development/theming.md b/apps/docs/src/development/theming.md
@@ -31,6 +31,10 @@ import "sit-onyx/themes/lidl.css";
 
 :::
 
+::: info
+Importing the styles for the theme manually is not necessary when using the nuxt module. See: [Nuxt](/development/packages/nuxt#themes)
+:::
+
 ## Dark mode
 
 Per default, onyx will be displayed in light mode. In order to use the dark mode, simply set the class `dark` once on the root of your application, e.g. on `<html>` or `<body>`.

diff --git a/apps/playground/CHANGELOG.md b/apps/playground/CHANGELOG.md
@@ -1,5 +1,19 @@
 # playground
 
+## 1.0.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [67a5e50]
+  - [email protected]
+
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [15114f7]
+  - [email protected]
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

diff --git a/packages/chartjs-plugin/CHANGELOG.md b/packages/chartjs-plugin/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [67a5e50]
+  - [email protected]
+
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [15114f7]
+  - [email protected]
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

diff --git a/packages/chartjs-plugin/package.json b/packages/chartjs-plugin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,25 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [67a5e50]
+  - [email protected]
+
+## 1.0.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [15114f7]
+  - [email protected]
+
+## 1.0.0-beta.2
+
+### Minor Changes
+
+- 3385622: Support themes in nuxt module
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.4",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
@@ -17,6 +17,7 @@ export default defineNuxtConfig({
     ],
   },
   onyx: {
+    theme: "kaufland",
     i18n: {
       registerLocales: {
         "en-US": "en-US",
@@ -25,4 +26,6 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  compatibilityDate: "2024-07-08",
 });
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -1,9 +1,15 @@
 import { addComponent, addPlugin, createResolver, defineNuxtModule, useLogger } from "@nuxt/kit";
 import type { NuxtOptions } from "@nuxt/schema";
 import type { ModuleHooks as NuxtI18nModuleHooks } from "@nuxtjs/i18n";
+import type { OnyxTheme } from "sit-onyx";
 import * as onyx from "sit-onyx";
 
 export interface ModuleOptions {
+  /**
+   * The onyx theme to use. See: [https://onyx.schwarz/development/theming.html](https://onyx.schwarz/development/theming.html)
+   * @default "onyx"
+   */
+  theme: OnyxTheme;
   /**
    * By default, the global onyx styles (`global.css` file) will be included
    * which applies some global styles like background color and font styles.
@@ -35,7 +41,9 @@ export default defineNuxtModule<ModuleOptions>({
     name: "@sit-onyx/nuxt",
     configKey: "onyx",
   },
-  defaults: {},
+  defaults: {
+    theme: "onyx",
+  },
   setup(options, nuxt) {
     const logger = useLogger("@sit-onyx/nuxt");
     const { resolve } = createResolver(import.meta.url);
@@ -49,6 +57,10 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.css.push("sit-onyx/style.css");
 
+    if (options.theme !== "onyx") {
+      nuxt.options.css.push(`sit-onyx/themes/${options.theme}.css`);
+    }
+
     if (!options.disableGlobalStyles) {
       nuxt.options.css.push("sit-onyx/global.css");
     }

diff --git a/packages/nuxt/test/component-imports.test.ts b/packages/nuxt/test/component-imports.test.ts
@@ -22,4 +22,9 @@ describe("auto imports", async () => {
       `@layer onyx.utility{body{background-color:var(--onyx-color-base-background-tinted)`,
     );
   });
+
+  it("imports the stylesheet matching the configured theme", async () => {
+    const html = await $fetch("/");
+    expect(html).toContain(".onyx-theme-lidl");
+  });
 });
diff --git a/packages/nuxt/test/fixtures/basic/nuxt.config.ts b/packages/nuxt/test/fixtures/basic/nuxt.config.ts
@@ -2,4 +2,6 @@ import MyModule from "../../../src/module";
 
 export default defineNuxtConfig({
   modules: [MyModule],
+  onyx: { theme: "lidl" },
+  compatibilityDate: "2024-07-08",
 });
diff --git a/packages/nuxt/test/fixtures/i18n/nuxt.config.ts b/packages/nuxt/test/fixtures/i18n/nuxt.config.ts
@@ -34,4 +34,5 @@ export default defineNuxtConfig({
       },
     },
   },
+  compatibilityDate: "2024-07-08",
 });
diff --git a/packages/sit-onyx/.storybook/docs-template.mdx b/packages/sit-onyx/.storybook/docs-template.mdx
@@ -8,6 +8,7 @@ import { Controls, Description, Meta, Primary, Stories, Title } from "@storybook
 
 <Primary />
 
+<section class="onyx-storybook-controls">
 ### Properties, Events and Slots
 
 Below you can find all available properties, events and slots of the component.
@@ -20,6 +21,7 @@ Below you can find all available properties, events and slots of the component.
 <Controls />
 
 <div style={{ marginTop: "3rem" }}></div>
+</section>
 
 ## Examples
 

diff --git a/packages/sit-onyx/.storybook/docs-template.scss b/packages/sit-onyx/.storybook/docs-template.scss
@@ -24,3 +24,8 @@
     display: none;
   }
 }
+
+// hide controls section if the story does not have any args
+.onyx-storybook-controls:not(:has(.docblock-argstable)) {
+  display: none;
+}
diff --git a/packages/sit-onyx/CHANGELOG.md b/packages/sit-onyx/CHANGELOG.md
@@ -1,5 +1,17 @@
 # sit-onyx
 
+## 1.0.0-beta.3
+
+### Minor Changes
+
+- 67a5e50: feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level
+
+## 1.0.0-beta.2
+
+### Minor Changes
+
+- 15114f7: feat(OnyxSelect): Implement truncation for OnyxSelectOptions
+
 ## 1.0.0-beta.1
 
 ### Major Changes

diff --git a/packages/sit-onyx/package.json b/packages/sit-onyx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/...playwright/snapshots/components/OnyxSelect/Select-truncated--chromium-linux.png b/...playwright/snapshots/components/OnyxSelect/Select-truncated--chromium-linux.png
diff --git a/.../playwright/snapshots/components/OnyxSelect/Select-truncated--firefox-linux.png b/.../playwright/snapshots/components/OnyxSelect/Select-truncated--firefox-linux.png
diff --git a/...x/playwright/snapshots/components/OnyxSelect/Select-truncated--webkit-linux.png b/...x/playwright/snapshots/components/OnyxSelect/Select-truncated--webkit-linux.png
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -14,8 +14,8 @@ const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   disabled: false,
   loading: false,
   required: false,
-  truncation: "ellipsis",
   skeleton: false,
+  truncation: "ellipsis",
 });
 
 const emit = defineEmits<{

diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   direction: "vertical",
   withCheckAll: false,
   disabled: false,
+  truncation: "ellipsis",
 });
 
 const { densityClass } = useDensity(props);
@@ -77,6 +78,7 @@ const checkAllLabel = computed(() => {
           v-for="option in props.options"
           :key="option.value.toString()"
           v-bind="option"
+          :truncation="option.truncation ?? props.truncation"
           :model-value="props.modelValue.includes(option.value)"
           class="onyx-checkbox-group__option"
           @update:model-value="handleUpdate(option.value, $event)"
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,5 @@ export default defineNuxtConfig({ @@
           },
         },
       },
+      compatibilityDate: "2024-07-08",
     });