v3.0.0

.prettierrc.json

@@ -8,6 +8,7 @@
   "trailingComma": "es5",
   "useTabs": false,
   "importOrder": [
+    "^react",
     "^lit",
     "<THIRD_PARTY_MODULES>",
     "^[./]",

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
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/baklava.js"></script>
 ```
 
 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.

commitlint.config.cjs

@@ -1,35 +1,36 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
   rules: {
-    'scope-enum': [
+    "scope-enum": [
       2,
-      'always',
+      "always",
       [
-        'storybook',
-        'design',
-        'react',
-        'deps',
-        'deps-dev',
+        "storybook",
+        "design",
+        "react",
+        "deps",
+        "deps-dev",
         // Components as scopes listed below
-        'button',
-        'icon',
-        'input',
-        'badge',
-        'tab',
-        'tooltip',
-        'progress-indicator',
-        'checkbox-group',
-        'checkbox',
-        'alert',
-        'select',
-        'pagination',
-        'radio',
-        'dialog',
-        'drawer',
-        'dropdown',
-        'switch',
-        'textarea',
-        'popover',
+        "button",
+        "icon",
+        "input",
+        "badge",
+        "tab",
+        "tooltip",
+        "progress-indicator",
+        "checkbox-group",
+        "checkbox",
+        "alert",
+        "select",
+        "pagination",
+        "radio",
+        "dialog",
+        "drawer",
+        "dropdown",
+        "switch",
+        "textarea",
+        "popover",
+        "notification",
       ],
     ],
   },

docs/customizing-baklava-theme.stories.mdx

@@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like:
 
 ```html
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/baklava.js"></script>
 ```
 
 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
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/themes/default.css" />
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/baklava.js"></script>
 ```
 
 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.

docs/design-system/colors.stories.mdx

@@ -28,6 +28,11 @@ Baklava uses a list of defined color with some default values.
     subtitle="Warning Color"
     colors={{ '': 'var(--bl-color-warning)', '--highlight': 'var(--bl-color-warning-highlight)', '--contrast': 'var(--bl-color-warning-contrast)' }}
   />
+  <ColorItem
+    title="--bl-color-info"
+    subtitle="Info Color"
+    colors={{ '': 'var(--bl-color-info)', '--highlight': 'var(--bl-color-info-highlight)', '--contrast': 'var(--bl-color-info-contrast)' }}
+  />
   <ColorItem
     title="--bl-color-neutral"
     subtitle="Neutral Colors"

docs/design-system/typography.stories.mdx

@@ -31,11 +31,32 @@ A display fonts is a font that is intended for use at large sizes for headings.
 
 Heading fonts are used as larger, higher impact text, such as in a title or section header.
 
+#### Heading 1
+
+| Variable | Styles | Example |
+|:---------|:-------|:-------:|
+| `--bl-font-heading-1-regular`| Weight: 400 / Regular <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-regular)' }}>Heading 1 Regular</h1> |
+| `--bl-font-heading-1-medium` | Weight: 500 / Medium <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-medium)' }}>Heading 1 Medium</h1> |
+| `--bl-font-heading-1-semibold` | Weight: 600 / Semibold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-semibold)' }}>Heading 1 Semibold</h1> |
+| `--bl-font-heading-1-bold` | Weight: 700 / Bold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-bold)' }}>Heading 1 Bold</h1> |
+
+#### Heading 2
+
+| Variable | Styles | Example |
+|:---------|:-------|:-------:|
+| `--bl-font-heading-2-regular`| Weight: 400 / Regular <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-regular)' }}>Heading 2 Regular</h1> |
+| `--bl-font-heading-2-medium` | Weight: 500 / Medium <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-medium)' }}>Heading 2 Medium</h1> |
+| `--bl-font-heading-2-semibold` | Weight: 600 / Semibold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-semibold)' }}>Heading 2 Semibold</h1> |
+| `--bl-font-heading-2-bold` | Weight: 700 / Bold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-bold)' }}>Heading 2 Bold</h1> |
+
+#### Heading 3
+
 | Variable | Styles | Example |
 |:---------|:-------|:-------:|
-| `--bl-font-heading-1` | Weight: 300 / Light <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1)' }}>Heading 1</h1> |
-| `--bl-font-heading-2` | Weight: 400 / Regular <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2)' }}>Heading 2</h1> |
-| `--bl-font-heading-3` | Weight: 400 / Regular <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3)' }}>Heading 3</h1> |
+| `--bl-font-heading-3-regular`| Weight: 400 / Regular <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-regular)' }}>Heading 3 Regular</h1> |
+| `--bl-font-heading-3-medium` | Weight: 500 / Medium <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-medium)' }}>Heading 3 Medium</h1> |
+| `--bl-font-heading-3-semibold` | Weight: 600 / Semibold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-semibold)' }}>Heading 3 Semibold</h1> |
+| `--bl-font-heading-3-bold` | Weight: 700 / Bold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-bold)' }}>Heading 3 Bold</h1> |
 
 ## Sub Titles
 
@@ -54,7 +75,7 @@ Subtitles are smaller than headlines. They are typically reserved for medium-emp
 
 | Variable | Styles | Example |
 |:---------|:-------|:-------:|
-| `--bl-font-title-2-regula` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
+| `--bl-font-title-2-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
 | `--bl-font-title-2-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-medium)' }}>Sub Title 2 Medium</h1> |
 | `--bl-font-title-2-semibold` | Weight: 600 / Semibold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-semibold)' }}>Sub Title 2 Semibold</h1> |
 | `--bl-font-title-2-bold` | Weight: 700 / Bold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-bold)' }}>Sub Title 2 Bold</h1> |
@@ -82,11 +103,26 @@ Subtitles are smaller than headlines. They are typically reserved for medium-emp
 
 Body text typically used for long-form writing as it works well for small text sizes.
 
+#### Body Text 1
+
+| Variable | Styles | Example |
+|:---------|:-------|:-------:|
+| `--bl-font-body-text-1-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-regular)' }}>Form Body Text 1 Regular</h1> |
+| `--bl-font-body-text-1-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-medium)' }}>Form Body Text 1 Medium</h1> |
+
+#### Body Text 2
+
+| Variable | Styles | Example |
+|:---------|:-------|:-------:|
+| `--bl-font-body-text-2-regular` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-regular)' }}>Form Body Text 2 Regular</h1> |
+| `--bl-font-body-text-2-medium` | Weight: 500 / Medium <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-medium)' }}>Form Body Text 2 Medium</h1> |
+
+#### Body Text 3
+
 | Variable | Styles | Example |
 |:---------|:-------|:-------:|
-| `--bl-font-body-text-1` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1)' }}>Form Body Text 1</h1> |
-| `--bl-font-body-text-2` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2)' }}>Form Body Text 2</h1> |
-| `--bl-font-body-text-3` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem  <br/> Height: 14px (font size + `bl-size-4xs`)| <h1 style={{ font: 'var(--bl-font-body-text-3)' }}>Form Body Text 3</h1> |
+| `--bl-font-body-text-3-regular` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-regular)' }}>Form Body Text 3 Regular</h1> |
+| `--bl-font-body-text-3-medium` | Weight: 500 / Medium <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-medium)' }}>Form Body Text 3 Medium</h1> |
 
 
 ## Captions

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 `<head>` section.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css"/>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/themes/default.css"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/baklava.js"></script>
 ```
 
 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.3.0/dist/assets");
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets");
 
 import App from "./App";
 
@@ -193,7 +193,7 @@ 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");
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets");
 ```
 
 We are ready to write tests.

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
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css"/>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/themes/default.css"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/baklava.js"></script>
 ```
 
 ### 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.3.0/dist/assets')
+setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets')
 ```
 
 #### Vue2

package.json

@@ -34,7 +34,7 @@
     "serve": "node scripts/build.js --serve",
     "storybook:dev": "storybook dev -p 1994",
     "lint": "npm-run-all -s lint:*",
-    "lint:tsc": "tsc --noEmit",
+    "lint:tsc": "tsc --noEmit --project ./tsconfig.json",
     "lint:eslint": "eslint src",
     "lint:style": "stylelint src/**/*.css",
     "lint:prettier": "prettier --check src",
@@ -89,7 +89,7 @@
     "@storybook/addon-mdx-gfm": "^7.4.3",
     "@storybook/addon-viewport": "^7.4.3",
     "@storybook/jest": "^0.2.2",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/web-components": "7.4.3",
     "@storybook/web-components-vite": "^7.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",