Merge branch 'next' into feat/906-link-component

Signed-off-by: Erbil <[email protected]>

CONTRIBUTING.md

@@ -1,52 +1,113 @@
-# How to contribute Baklava Design System
+# Contributing to Baklava Design System 🎨
 
-You are very welcome if you want to contribute to the Baklava Design System. You can make several types of contributions, such as:
+Welcome to Baklava! We're excited that you're interested in contributing. This guide will help you get started with making contributions to our design system.
 
-* Fixing bugs in code
-* Implementing new features
-* Improving documentation
-* Suggesting design ideas
+![Baklava Design System](./docs/images/contributing-header.png)
 
-## Making a contribution using an Issue
+## Ways to Contribute 🚀
 
-Did you notice a bug? Or a missing/wrong part in documentation? Or do you have a suggestion about implementation or design? Please feel free to [create an issue](https://github.com/Trendyol/baklava/issues/new) for that. Please provide clear and detailed information about your request or report as much as possible. Anyone can join to share their ideas/experiences about the issue you created.
+There are several ways you can contribute to Baklava:
 
-If you have a question about how to use our design system or a specific component, please use our [discussion board](https://github.com/Trendyol/baklava/discussions).
+- 🐛 **Fix Bugs**: Help us squash bugs in the codebase
+- ✨ **Add Features**: Implement new components or enhance existing ones
+- 📝 **Improve Docs**: Make our documentation clearer and more helpful
+- 💡 **Share Ideas**: Suggest improvements to our design system
 
-## Making a contribution using a PR
+## Getting Started 🌟
 
-If you notice a problem in our repository (whether it's in the code or docs) and are able to fix it, just fork the project, make your changes, and create a PR for it. You can refer to [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) if you are not sure how to propose a change to a repository.
+### 1. Creating an Issue 📋
 
-## Baklava contribution rules
+Found a bug or have a suggestion? [Create an issue](https://github.com/Trendyol/baklava/issues/new)!
 
-We have some rules to make contribution process smooth and as automated as possible.
+![Creating an Issue](./docs/images/create-issue.gif)
 
-### Coding conventions
+**Tips for a great issue:**
+- Clearly describe what you observed
+- Include steps to reproduce (for bugs)
+- Add screenshots if relevant
+- Use our issue templates
+- Share any relevant context or examples
 
-We implemented several linters and static code checkers to be sure if every new code is synced with the style of current codebase. Please run the `npm run lint` to check if your changes conflict with our rules.
+> 💬 For questions about using Baklava, please use our [discussion board](https://github.com/Trendyol/baklava/discussions).
 
-### 100% Code coverage with unit tests
+### 2. Making a Pull Request 🔄
 
-We expect to cover every line of code we wrote in our unit tests. If you make changes in the code, please ensure that you cover those changes inside the related test file. To do that, you can run the `npm test` command and check the `coverage` folder for a detailed report. This command is automatically executed in every commit, and if coverage is under 100%, your PR checks will fail.
+If you notice a problem in our repository (whether it's in the code or docs) and are able to fix it, follow these steps:
 
-### Commit rules
+1. Fork the repository
+2. Create your feature branch
+3. Make your changes
+4. Submit a pull request
 
-The Baklava library has an automated release flow, and our release versions and release notes are automatically generated from git commit messages. So commit messages are very important to release changes properly. We have a specific guideline about committing rules, please refer it.
+![PR Process](./docs/images/pr-process.gif)
+Need help? Check out the [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) on creating PRs.
 
-### Design review
+## Contribution Guidelines ✅
 
-In every push to a PR, we are running automated visual regression tests to be sure we are not breaking any components visual output accidentally. When you are done with your changes and created a PR, if you have some changes that effects visual output of any components, then our automated flow will notice this and block PR for a design review. Design reviews are done by designers involved in project. If the changes are intentional, they will be approved, and once the PR is merged, the new designs will serve as references for upcoming PRs. If there are no visual changes, this step will pass automatically, and there will be no need for a review from a designer.
+### 1. Coding Conventions 💻
 
-### Should be RTL-Aware
+We maintain strict code quality standards:
+- Run `npm run lint` before submitting your changes
+- Follow our code style guidelines
+- Ensure your code syncs with our current codebase style
+- Fix any linting errors before submitting
 
-Baklava components support Right-to-Left (RTL) text direction, which is crucial for languages written from right to left. When developing or modifying components, ensure proper RTL support by following these guidelines:
+### 2. Test Coverage Requirements 🧪
 
-1. Use the `--bl-text-x-direction` CSS custom property for transformations and directional styling.
-2. Utilize CSS logical properties (e.g., `inline-start`, `inline-end`, `margin-inline-start`) instead of directional properties.
-3. Use `inset` with logical values for positioning.
+We maintain 100% code coverage:
+- Write unit tests for all new code
+- Run `npm test` to check coverage
+- Review the `coverage` folder for detailed reports
+- Tests run automatically on commit
+- PRs will fail if coverage drops below 100%
 
-For a comprehensive guide on RTL support and detailed examples, please refer to our [Right-to-Left (RTL) documentation](/docs/documentation-right-to-left-rtl--documentation).
+### 3. Commit Message Guidelines 📝
 
-### Enough approvals to merge
+Our release process is automated:
+- Release versions are generated from commit messages
+- Release notes are automatically created
+- Follow our specific commit message format
+- Each commit should be meaningful and descriptive
 
-Every PR should be reviewed and approved by at least one of the core contributors. Please add needed information to PR description to help making review process quicker and easier.
+### 4. Design Review Process 🎨
+
+We protect our visual consistency:
+- Automated visual regression tests run on each PR
+- Changes affecting component visuals require design review
+- Design team must approve visual changes
+- Approved changes become reference for future work
+- Non-visual changes skip design review automatically
+
+### 5. RTL Support Requirements 🌐
+
+All components must support Right-to-Left (RTL) languages:
+
+1. Use `--bl-text-x-direction` CSS property for transformations
+2. Implement CSS logical properties:
+```css
+/* ✅ Do this */
+margin-inline-start: 1rem;
+padding-inline-end: 1rem;
+
+/* ❌ Not this */
+margin-left: 1rem;
+padding-right: 1rem;
+```
+3. Use `inset` with logical values for positioning
+
+### 6. PR Review Requirements 👥
+
+Every PR must meet these criteria:
+- At least one core contributor approval
+- Detailed PR description
+- All automated checks passing
+- Documentation updates if needed
+- Test coverage requirements met
+
+## Need Help? 💬
+
+- Check our [documentation](https://baklava.design/)
+- Join our [discussion board](https://github.com/Trendyol/baklava/discussions)
+- Reach out to core team members
+
+Thank you for contributing to Baklava! 🙏

src/components/calendar/bl-calendar.css

@@ -63,27 +63,27 @@
   --bl-size-xl: 40px;
   --bl-border-radius-m: 50%;
   --bl-border-radius-l: 50%;
+}
 
-  &.today-day {
-    --bl-color-neutral-darker: var(--bl-color-primary);
-    --bl-color-neutral-darkest: var(--bl-color-primary);
-  }
+.day.today-day {
+  --bl-color-neutral-darker: var(--bl-color-primary);
+  --bl-color-neutral-darkest: var(--bl-color-primary);
+}
 
-  &.other-month-day {
-    --bl-color-neutral-darker: var(--bl-color-neutral-dark);
+.day.other-month-day {
+  --bl-color-neutral-darker: var(--bl-color-neutral-dark);
+}
 
-    &.selected-day {
-      --bl-color-neutral-darker: var(--bl-color-neutral-full);
-    }
-  }
+.day.other-month-day.selected-day {
+  --bl-color-neutral-darker: var(--bl-color-neutral-full);
+}
 
-  &.selected-day {
-    background: var(--bl-color-primary);
-    border-radius: 50%;
+.day.selected-day {
+  background: var(--bl-color-primary);
+  border-radius: 50%;
 
-    --bl-button-focus-border-color: var(--bl-color-primary);
-    --bl-color-neutral-darker: var(--bl-color-neutral-full);
-  }
+  --bl-button-focus-border-color: var(--bl-color-primary);
+  --bl-color-neutral-darker: var(--bl-color-neutral-full);
 }
 
 .range-day {
@@ -127,7 +127,6 @@
 
 .grid-item {
   width: 93.33px;
-
   --bl-size-3xs: 15px;
 }
 

src/components/calendar/bl-calendar.test.ts

@@ -1,7 +1,6 @@
 import { expect, fixture, html } from "@open-wc/testing";
 import "./bl-calendar";
 import { BlButton, BlCalendar } from "../../baklava";
-import { blCalendarChangedEvent } from "./bl-calendar";
 import { CALENDAR_TYPES, CALENDAR_VIEWS, FIRST_MONTH_INDEX, LAST_MONTH_INDEX } from "./bl-calendar.constant";
 import sinon from "sinon";
 
@@ -93,7 +92,7 @@ describe("bl-calendar", () => {
       selectedDates = customEvent.detail;
     };
 
-    singleTypeCalendar.addEventListener(blCalendarChangedEvent, onBlCalendarChanged);
+    singleTypeCalendar.addEventListener("bl-calendar-change", onBlCalendarChanged);
     const daysButtons = Array.from(singleTypeCalendar.shadowRoot?.querySelectorAll(".day-wrapper bl-button") || []) as BlButton[];
 
     daysButtons[0].click();

src/components/calendar/bl-calendar.ts

@@ -14,8 +14,6 @@ import {
 import style from "./bl-calendar.css";
 import { Calendar, CalendarDay, CalendarView } from "./bl-calendar.types";
 
-export const blCalendarChangedEvent = "bl-calendar-change";
-
 /**
  * @tag bl-calendar
  * @summary Baklava Calendar component
@@ -37,7 +35,7 @@ export default class BlCalendar extends DatepickerCalendarMixin {
   /**
    * Fires when date selection changes
    */
-  @event(blCalendarChangedEvent) _onBlCalendarChange: EventDispatcher<Date[]>;
+  @event("bl-calendar-change") _onBlCalendarChange: EventDispatcher<Date[]>;
 
   static get styles(): CSSResultGroup {
     return [style];
@@ -224,7 +222,11 @@ export default class BlCalendar extends DatepickerCalendarMixin {
     }
     if (this.disabledDates.length > 0) {
       return this.disabledDates.some(disabledDate => {
-        return calendarDate.getTime() === disabledDate.getTime();
+        return (
+          calendarDate.getDate() === disabledDate.getDate() &&
+          calendarDate.getMonth() === disabledDate.getMonth() &&
+          calendarDate.getFullYear() === disabledDate.getFullYear()
+        );
       });
     }
     return false;

src/components/datepicker/bl-datepicker.test.ts

@@ -1,12 +1,11 @@
 import { aTimeout, expect, fixture, html } from "@open-wc/testing";
-import sinon from "sinon";
-import { BlButton } from "../../baklava";
-import { blCalendarChangedEvent } from "../calendar/bl-calendar";
+import { BlButton, BlDatePicker } from "../../baklava";
 import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
-import BlDatepicker, { blDatepickerChangedEvent } from "./bl-datepicker";
+import sinon from "sinon";
+import "./bl-datepicker";
 
 describe("BlDatepicker", () => {
-  let element: BlDatepicker;
+  let element: BlDatePicker;
   let getElementByIdStub: sinon.SinonStub;
   let consoleWarnSpy: sinon.SinonSpy;
 
@@ -69,7 +68,7 @@ describe("BlDatepicker", () => {
     element._inputEl?.click();
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [new Date()] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [new Date()] }));
     await element.updateComplete;
     await aTimeout(400);
     expect(element._selectedDates.length).to.equal(1);
@@ -79,15 +78,15 @@ describe("BlDatepicker", () => {
   it("should trigger datepicker change event on date selection", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.addEventListener(blDatepickerChangedEvent, (event) => {
+    element.addEventListener("bl-datepicker-change", (event) => {
       const customEvent = event as CustomEvent;
 
       expect(customEvent).to.exist;
       expect(customEvent.detail).to.deep.equal([testDate]);
 
     });
 
-    element._calendarEl.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [testDate] }));
+    element._calendarEl.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [testDate] }));
 
     await element.updateComplete;
   });
@@ -117,7 +116,7 @@ describe("BlDatepicker", () => {
   it("should use custom value formatter when provided", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.inputValueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
+    element.valueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
     element.setDatePickerInput([testDate]);
     await element.updateComplete;
 
@@ -130,7 +129,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: dates }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: dates }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);
@@ -152,7 +151,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.RANGE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [startDate, endDate] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [startDate, endDate] }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);
@@ -259,15 +258,17 @@ describe("BlDatepicker", () => {
   it("should return a single date when value is a single Date", () => {
     const date = new Date("2024-01-01");
 
-    element._value = date;
+    element.value = date;
     expect(element.value).to.equal(date);
   });
 
   it("should return an array of dates when value is an array of Dates", () => {
     const dates = [new Date("2024-01-01"), new Date("2024-02-01")];
 
-    element._value = dates;
-    expect(element.value).to.deep.equal(dates);
+    element.type=CALENDAR_TYPES.MULTIPLE;
+    element.value = dates;
+
+    expect(element.value).to.equal(dates);
   });
 
   it("should return undefined if value is not set", () => {
@@ -277,7 +278,7 @@ describe("BlDatepicker", () => {
   it("should warn when 'value' is not an array for multiple/range selection", async () => {
     element = await fixture<BlDatepicker>(html`
       <bl-datepicker type="multiple" locale="en"></bl-datepicker>`);
-    element._value = new Date();
+    element.value = new Date();
 
     element.firstUpdated();
 
@@ -286,7 +287,7 @@ describe("BlDatepicker", () => {
 
   it("should not warn when value is an array for multiple/range selection", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
-    element._value = [new Date(), new Date()];
+    element.value = [new Date(), new Date()];
 
     element.firstUpdated();
 
@@ -295,7 +296,7 @@ describe("BlDatepicker", () => {
 
   it("should not warn when 'value' is an array of exactly two Date objects in RANGE mode", () => {
     element.type = CALENDAR_TYPES.RANGE;
-    element._value = [new Date(), new Date()];
+    element.value = [new Date(), new Date()];
 
     element.firstUpdated();