@otto-de/b2b-core-components 1.15.1 → 1.17.0

package/dist/collection/components/date-picker/date-picker.css

@@ -0,0 +1,324 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 24 Oct 2024 12:35:00 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Thu, 24 Oct 2024 12:35:01 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host .b2b-date-picker {
+  position: relative;
+  z-index: 1000;
+}
+:host .b2b-date-picker__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+:host .b2b-date-picker-input-focus-wrapper {
+  width: 100%;
+  height: 100%;
+}
+:host .b2b-date-picker-input-focus-wrapper:hover {
+  cursor: text;
+}
+:host .b2b-date-picker-input-wrapper {
+  display: flex;
+  box-sizing: border-box;
+  height: var(--b2b-size-90); /* The height of the wrapper */
+  border: var(--b2b-size-1) solid var(--b2b-color-grey-200);
+  justify-content: flex-start; /* Aligns the input to the left */
+  border-radius: var(--b2b-size-7);
+  padding: var(--b2b-size-15) var(--b2b-size-20);
+  max-width: 600px;
+  background-color: var(--b2b-color-white-100);
+  transition: outline 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+:host .b2b-date-picker-input-wrapper--focused {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+:host .b2b-date-picker-input-wrapper--error {
+  background-color: var(--b2b-color-error-50);
+  border: 1px solid var(--b2b-color-error-100);
+  border-color: var(--b2b-color-error-100);
+}
+:host .b2b-date-picker-input-wrapper .b2b-date-picker-input {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  margin-left: 0;
+  padding-left: 0;
+  height: 100%;
+  width: 15%;
+  color: var(--b2b-color-black-100);
+  font-size: var(--b2b-size-35);
+  line-height: var(--b2b-size-copy-line-height-100);
+  font-weight: var(--b2b-font-weight-normal);
+  font-family: var(--b2b-font-family-default);
+}
+:host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
+  background-color: var(--b2b-color-error-50);
+}
+:host .b2b-date-picker-selected-date {
+  flex: 1;
+  align-self: center;
+  font-size: var(--b2b-size-35);
+}
+:host .b2b-date-picker-label {
+  font-size: var(--b2b-size-35);
+  color: var(--b2b-color-black-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  margin-bottom: var(--b2b-size-5);
+}
+:host .b2b-date-picker-hint {
+  font-size: var(--b2b-size-copy-50);
+  line-height: var(--b2b-size-copy-line-height-75);
+  display: block;
+  margin-top: var(--b2b-size-7);
+  color: var(--b2b-color-grey-300);
+}
+:host .b2b-date-picker-hint--error {
+  color: var(--b2b-color-error-100);
+}
+:host .b2b-date-picker-body {
+  position: relative;
+  border-right: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-left: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-bottom: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-top: 2px none -webkit-focus-ring-color;
+  outline-offset: -1px;
+  width: 300px;
+  box-sizing: border-box;
+  padding-bottom: var(--b2b-size-40);
+  outline: none;
+  background-color: var(--b2b-color-white-100);
+  z-index: 900;
+}
+:host .b2b-date-picker-body--hidden {
+  display: none;
+}
+:host .b2b-icons {
+  display: flex;
+  margin-top: var(--b2b-size-5);
+  align-items: center;
+}
+:host .b2b-close-icon {
+  display: block;
+}
+:host .b2b-event-icon {
+  display: block;
+}

package/dist/collection/components/date-picker/date-picker.e2e.js

@@ -0,0 +1,136 @@
+import { newE2EPage } from "@stencil/core/testing";
+//ToDo Rewrite the tests so that the next, previous button and date selection scenarios are also tested
+describe('B2B-Date-Picker', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker></b2b-date-picker>`);
+    });
+    it('should render the date picker component', async () => {
+        const datePicker = await page.find('b2b-date-picker');
+        const clickableInputComponent = await page.find('b2b-date-picker >>> div.b2b-date-picker-input-wrapper');
+        expect(clickableInputComponent).not.toBeNull();
+        expect(datePicker).not.toBeNull();
+    });
+    it('should render the datepicker component when date picker icon is clicked', async () => {
+        const datePicker = await page.find('b2b-date-picker');
+        const clickableInputComponent = await page.find('b2b-date-picker >>> div.b2b-date-picker-input-wrapper');
+        await clickableInputComponent.click();
+        await page.waitForChanges();
+        const datePickerComponent = await page.find('b2b-date-picker >>> .b2b-date-picker-body');
+        const datePickerHeader = await page.find('b2b-date-picker >>> .b2b-date-picker-body >>> b2b-date-picker-header');
+        const datePickerDays = await page.find('b2b-date-picker >>> .b2b-date-picker-body >>> b2b-date-picker-days');
+        expect(clickableInputComponent).not.toBeNull();
+        expect(datePicker).not.toBeNull();
+        expect(datePickerComponent).not.toBeNull();
+        expect(datePickerHeader).not.toBeNull();
+        expect(datePickerDays).not.toBeNull();
+        expect(await datePickerComponent.isVisible()).toBe(true);
+        expect(await datePickerHeader.isVisible()).toBe(true);
+        expect(await datePickerDays.isVisible()).toBe(true);
+    });
+    it('should disable past dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-past-dates=true></b2b-date-picker>`);
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        const prevDay = yesterday.getDate();
+        if (prevDay > 0 && prevDay >= 30) {
+            const prevDayElement = await page.find({ text: prevDay.toString() });
+            expect(prevDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    it('should disable future dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-future-dates=true></b2b-date-picker>`);
+        const today = new Date();
+        const tomorrow = new Date(today);
+        tomorrow.setDate(today.getDate() + 1);
+        const nextDay = tomorrow.getDate();
+        if (nextDay > 0 && nextDay !== 1) {
+            const nextDayElement = await page.find({ text: nextDay.toString() });
+            expect(nextDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    it('should disable weekends dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-weekends=true></b2b-date-picker>`);
+        const previousSunday = new Date().getDate() - (new Date().getDay() % 0);
+        if (previousSunday > 0) {
+            const prevDayElement = await page.find({
+                text: previousSunday.toString(),
+            });
+            expect(prevDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    describe('B2B-Date-Picker Input Field', () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent(`<b2b-date-picker></b2b-date-picker>`);
+        });
+        it('should allow entering a date via the input field', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            expect(inputField).not.toBeNull();
+            await inputField.press('2');
+            await inputField.press('6');
+            await inputField.press('.');
+            await inputField.press('1');
+            await inputField.press('1');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('8');
+            await page.waitForChanges();
+            const inputValue = await inputField.getProperty('value');
+            expect(inputValue).toBe('26.11.2028');
+        });
+        it('should show error state when invalid date is entered', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            await inputField.press('3');
+            await inputField.press('2');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('4');
+            await page.waitForChanges();
+            const inputValue = await inputField.getProperty('value');
+            expect(inputValue).toBe('32....2024');
+            const errorHint = await page.find('b2b-date-picker >>> span.b2b-date-picker-hint--error');
+            expect(errorHint).not.toBeNull();
+        });
+        it('should handle keyboard input and clear invalid date', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            await inputField.press('3');
+            await inputField.press('2');
+            await inputField.press('.');
+            await inputField.press('1');
+            await inputField.press('1');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('4');
+            await page.waitForChanges();
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await page.waitForChanges();
+            const clearedInputValue = await inputField.getProperty('value');
+            expect(clearedInputValue).toBe('');
+        });
+    });
+});