diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 849bd3e4..a1b2b6e6 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -29,7 +29,7 @@ body:
attributes:
label: Baklava Version
description: What version of Baklava are you using?
- placeholder: 2.1.0-beta.7
+ placeholder: 2.3.0-beta.7
validations:
required: false
- type: textarea
diff --git a/README.md b/README.md
index 91b5f322..484d415c 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,8 @@ Web implementation of the design system is created as native web components so i
Preferred way of using Baklava is using it via CDN. Just import library JS and CSS files to your main document like below:
```html
-
-
+
+
```
This way library will be served from a very high performant CDN and all of the Baklava web components will be ready to use inside your web project.
diff --git a/docs/customizing-baklava-theme.stories.mdx b/docs/customizing-baklava-theme.stories.mdx
index 0d1ad54e..88e77986 100644
--- a/docs/customizing-baklava-theme.stories.mdx
+++ b/docs/customizing-baklava-theme.stories.mdx
@@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like:
```html
-
+
```
With this opportunity you can use all of the Baklava components with your own branding colors, own selection of Font or different sizing values.
@@ -29,9 +29,9 @@ With this opportunity you can use all of the Baklava components with your own br
If you want to change a small set of the design tokens, you may consider to extend default theme.
```html
-
+
-
+
```
With this, you can -for example- only override color palette for your app and continue to use typography or spacing rules from the default theme.
diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
index dc3c449f..3cc5ab77 100644
--- a/docs/using-baklava-in-react.stories.mdx
+++ b/docs/using-baklava-in-react.stories.mdx
@@ -17,8 +17,8 @@ npm install @trendyol/baklava
Include Baklava library from CDN to your project's `index.html` file's `` section.
```html
-
-
+
+
```
Then you can use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code.
@@ -62,7 +62,7 @@ import ReactDOM from "react-dom/client";
import "@trendyol/baklava";
import { setIconPath } from "@trendyol/baklava";
import "@trendyol/baklava/dist/themes/default.css";
-setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/assets");
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/assets");
import App from "./App";
@@ -160,3 +160,62 @@ function MyComponent() {
export default MyComponent;
```
+
+## Testing with Vitest
+
+Baklava uses ES modules. We will explain how to install Vitest due to its ES Modules support. If you are using Jest,
+your version should be greater than 26.5.0, and you should add "@trendyol/baklava" to the
+[transformIgnorePatterns](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization).
+
+```shell
+npm install -D vitest vitest-dom jsdom
+```
+
+After downloading Vitest with this command, you should provide a file path to the setupFiles section in your
+Vitest config file. We used './src/setupTest.ts'.
+
+```js
+import {defineConfig} from "vitest/config";
+
+export default defineConfig({
+ test: {
+ ...otherProps,
+ environment: "jsdom",
+ setupFiles: ["./src/setupTest.ts"]
+ }
+});
+```
+
+Afterward, we should edit our setupTest.ts file just like setting up baklava.
+
+```js
+import "vitest-dom/extend-expect";
+import "@trendyol/baklava";
+import { setIconPath } from "@trendyol/baklava";
+import "@trendyol/baklava/dist/themes/default.css";
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/assets");
+```
+
+We are ready to write tests.
+
+```tsx
+import { fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { BlButton } from "@trendyol/baklava/dist/baklava-react";
+import React from "react";
+
+test("should trigger click event", async () => {
+ const onClickFn = vi.fn();
+ render(
+
+ Button
+
+ );
+
+ const blButton = await screen.findByText("Button");
+ const button = blButton.shadowRoot!.querySelector("button")!;
+ fireEvent.click(button);
+
+ expect(onClickFn).toBeCalled();
+});
+```
diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
index 1241ad98..ba490dac 100644
--- a/docs/using-baklava-in-vue.stories.mdx
+++ b/docs/using-baklava-in-vue.stories.mdx
@@ -17,8 +17,8 @@ To make the rule more generic, easiest way is ignoring the elements start with `
To be able to use Baklava via CDN, you should add our default.css and baklava.js at head tag in your index.html file.
```html
-
-
+
+
```
### Via NPM
@@ -29,7 +29,7 @@ then,
```js
@import "@trendyol/baklava/dist/themes/default.css";
import { setIconPath } from '@trendyol/baklava'
-setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/assets')
+setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/assets')
```
#### Vue2
diff --git a/src/components/icon/icon-list.ts b/src/components/icon/icon-list.ts
index b0515eb7..88e09f87 100644
--- a/src/components/icon/icon-list.ts
+++ b/src/components/icon/icon-list.ts
@@ -29,11 +29,11 @@ const icons = [
"chart",
"chatbot",
"check",
- "clock",
"check_fill",
+ "clock",
"close",
- "code",
"close_fill",
+ "code",
"coin",
"compass",
"complain",
@@ -74,8 +74,8 @@ const icons = [
"global_export",
"globe",
"go_forward",
- "graphic_decrease",
"graphic",
+ "graphic_decrease",
"group_of_people",
"growth",
"hamburger_menu",
@@ -166,6 +166,7 @@ const icons = [
"puzzle",
"qr",
"report",
+ "review",
"rocket",
"rotate",
"sad",
diff --git a/src/components/icon/icons/review.svg b/src/components/icon/icons/review.svg
new file mode 100644
index 00000000..7b9d106f
--- /dev/null
+++ b/src/components/icon/icons/review.svg
@@ -0,0 +1,3 @@
+