Merge branch 'main' into chore/742-Add-new-OnyxSelect-storybook-example

SchwarzIT · Oct 30, 2024 · 158a420 · 158a420
2 parents 96e53ec + b6ac7bd
commit 158a420
Show file tree

Hide file tree

Showing 25 changed files with 452 additions and 61 deletions.
diff --git a/.changeset/olive-jobs-attend.md b/.changeset/olive-jobs-attend.md
@@ -0,0 +1,8 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxStepper):
+
+- Implemented `stripStep` and `precision`.
+- Deprecated `step`, replacing it with `stepSize` and `precision`.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -190,6 +190,7 @@
     "old-lobsters-accept",
     "olive-cups-shave",
     "olive-forks-mate",
+    "olive-jobs-attend",
     "olive-months-turn",
     "perfect-fans-return",
     "pink-days-rest",

diff --git a/apps/demo-app/CHANGELOG.md b/apps/demo-app/CHANGELOG.md
@@ -1,5 +1,12 @@
 # demo-app
 
+## 1.0.0-beta.61
+
+### Patch Changes
+
+- Updated dependencies [3bc1d58]
+  - [email protected]
+
 ## 1.0.0-beta.60
 
 ### 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.60",
+  "version": "1.0.0-beta.61",
   "type": "module",
   "scripts": {
     "dev": "turbo run vite --filter demo-app",

diff --git a/apps/demo-app/src/components/form-demo/FormDemo.vue b/apps/demo-app/src/components/form-demo/FormDemo.vue
@@ -6,6 +6,7 @@ import {
   OnyxInput,
   OnyxRadioGroup,
   OnyxSelect,
+  OnyxStepper,
   OnyxSwitch,
   OnyxTextarea,
   type CheckboxGroupOption,
@@ -22,6 +23,10 @@ export type FormData = Partial<{
   minlengthTextarea: string;
   typeInput: string;
   patternInput: string;
+  defaultStepper: number;
+  requiredStepper: number;
+  areaStepper: number;
+  stripStepStepper: number;
   switch: boolean;
   checkboxGroup: number[];
   requiredSelect: string[];
@@ -127,6 +132,27 @@ const radioOptions: RadioButtonOption[] = [
       :minlength="5"
       required
     />
+    <OnyxStepper v-model="formState.defaultStepper" class="onyx-grid-span-4" label="Delault" />
+    <OnyxStepper
+      v-model="formState.requiredStepper"
+      class="onyx-grid-span-4"
+      label="Requires a value"
+      required
+    />
+    <OnyxStepper
+      v-model="formState.areaStepper"
+      class="onyx-grid-span-4"
+      label="Only allows Numbers inside an area"
+      :min="5"
+      :max="20"
+    />
+
+    <OnyxStepper
+      v-model="formState.stripStepStepper"
+      class="onyx-grid-span-4"
+      label="Strip Step"
+      strip-step
+    />
 
     <OnyxSwitch v-model="formState.switch" class="onyx-grid-span-4" label="Switch" required />
 

diff --git a/apps/playground/CHANGELOG.md b/apps/playground/CHANGELOG.md
@@ -1,5 +1,12 @@
 # playground
 
+## 1.0.0-beta.61
+
+### Patch Changes
+
+- Updated dependencies [3bc1d58]
+  - [email protected]
+
 ## 1.0.0-beta.60
 
 ### 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.60",
+  "version": "1.0.0-beta.61",
   "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,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.61
+
+### Patch Changes
+
+- Updated dependencies [3bc1d58]
+  - [email protected]
+
 ## 1.0.0-beta.60
 
 ### 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.60",
+  "version": "1.0.0-beta.61",
   "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,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.62
+
+### Patch Changes
+
+- Updated dependencies [3bc1d58]
+  - [email protected]
+
 ## 1.0.0-beta.61
 
 ### 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.61",
+  "version": "1.0.0-beta.62",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/sit-onyx/CHANGELOG.md b/packages/sit-onyx/CHANGELOG.md
@@ -1,5 +1,14 @@
 # sit-onyx
 
+## 1.0.0-beta.61
+
+### Minor Changes
+
+- 3bc1d58: feat(OnyxStepper):
+
+  - Implemented `stripStep` and `precision`.
+  - Deprecated `step`, replacing it with `stepSize` and `precision`.
+
 ## 1.0.0-beta.60
 
 ### Patch 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.60",
+  "version": "1.0.0-beta.61",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
@@ -274,7 +274,7 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await inputElement.blur();
   // ASSERT
   expect(events).toMatchObject({
-    updateModelValue: [1, 10],
+    updateModelValue: [10],
   });
 });
 
@@ -357,7 +357,7 @@ test("should increment/decrement value by step on counter button click", async (
     props: {
       label: "Test label",
       style: "width: 12rem;",
-      step: 2,
+      stepSize: 2,
     },
     on,
   });
@@ -453,6 +453,7 @@ test("should not allow entering value lower the min value that has been set", as
       label: "Test label",
       style: "width: 12rem;",
       min: 2,
+      modelValue: 4,
     },
     on,
   });
@@ -467,10 +468,6 @@ test("should not allow entering value lower the min value that has been set", as
   expect(accessibilityScanResults.violations).toEqual([]);
   await expect(component.getByLabel("Test label")).toBeAttached();
 
-  await input.click();
-  await input.fill("4");
-  await expect(input).toHaveValue("4");
-
   await substractButton.click();
   await expect(input).toHaveValue("3");
 
@@ -479,3 +476,126 @@ test("should not allow entering value lower the min value that has been set", as
 
   await expect(substractButton).toBeDisabled();
 });
+
+test("Should display the same number of decimal places as the smallest possible step", async ({
+  mount,
+  makeAxeBuilder,
+}) => {
+  // ARRANGE
+  const on = {
+    "update:modelValue": (newValue) => {
+      component.update({
+        props: {
+          modelValue: newValue,
+        },
+        on,
+      });
+    },
+  };
+
+  const component = await mount(OnyxStepper, {
+    props: {
+      label: "Test label",
+      style: "width: 12rem;",
+      precision: 0.01,
+    },
+    on,
+  });
+
+  const input = component.locator("input");
+
+  // ACT
+  const accessibilityScanResults = await makeAxeBuilder().analyze();
+
+  // ASSERT
+  expect(accessibilityScanResults.violations).toEqual([]);
+
+  await input.fill("1");
+  await input.dispatchEvent("change");
+  await expect(input).toHaveValue("1.00");
+});
+
+test("Should display an error if the value is not a multiple of the precision", async ({
+  page,
+  mount,
+  makeAxeBuilder,
+}) => {
+  // ARRANGE
+  const on = {
+    "update:modelValue": (newValue: number) => {
+      component.update({
+        props: {
+          modelValue: newValue,
+        },
+        on,
+      });
+    },
+  };
+
+  const component = await mount(OnyxStepper, {
+    props: {
+      label: "Test label",
+      style: "width: 12rem;",
+      modelValue: 1,
+      precision: 0.5,
+    },
+    on,
+  });
+
+  const input = component.getByLabel("Test label");
+  const errorMessage = component.locator(".onyx-form-element__error-message");
+
+  // ACT
+  const accessibilityScanResults = await makeAxeBuilder().analyze();
+
+  // ASSERT
+  expect(accessibilityScanResults.violations).toEqual([]);
+
+  await input.fill("1");
+  await page.keyboard.press("Enter");
+
+  await expect(errorMessage).toBeHidden();
+  await page.keyboard.press("Enter");
+
+  await input.fill("3.6");
+  await page.keyboard.press("Enter");
+
+  await expect(errorMessage).toBeVisible();
+});
+
+test("Should revert to the last valid input if the current input is invalid in stripStep mode", async ({
+  page,
+  mount,
+}) => {
+  // ARRANGE
+  const on = {
+    "update:modelValue": (newValue: number) => {
+      component.update({
+        props: {
+          modelValue: newValue,
+        },
+        on,
+      });
+    },
+  };
+
+  const component = await mount(OnyxStepper, {
+    props: {
+      label: "Test label",
+      style: "width: 12rem;",
+      precision: 0.5,
+      stripStep: true,
+    },
+    on,
+  });
+
+  const input = component.locator("input");
+
+  await input.fill("1");
+  await page.keyboard.press("Enter");
+  await expect(input).toHaveValue("1.0");
+  await page.keyboard.press("Enter");
+  await input.fill("1.6");
+  await page.keyboard.press("Enter");
+  await expect(input).toHaveValue("1.0");
+});