v3.0.0

.prettierrc.json

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

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/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

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",

scripts/generate-react-exports.js

@@ -3,7 +3,7 @@ import { pascalCase } from "pascal-case";
 import path from "path";
 import { format } from "prettier";
 import { fileURLToPath } from "url";
-
+import prettierConfig from "../.prettierrc.json" assert { type: "json" };
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -24,43 +24,41 @@ const baklavaReactFileParts = [];
 
 for (const module of customElementsModules) {
   const { declarations, path } = module;
-  const componentDeclaration = declarations.find(declaration => declaration.customElement === true);
-  const { events, name: componentName, tagName: fileName, jsDoc } = componentDeclaration;
+  const component = declarations.find(declaration => declaration.customElement === true);
+  const { name: componentName, tagName: fileName } = component;
 
-  const eventNames =
-    events?.reduce((acc, curr) => {
-      acc[getReactEventName(curr.name)] = curr.name;
-      return acc;
-    }, {}) || {};
+  const eventNames = (component.events || []).map(event => {
+    const reactEvent = getReactEventName(event.name);
+      const reactEventName = `${componentName}${reactEvent.split("onBl")[1]}`;
+      return `${reactEvent}: '${event.name}' as EventName<${reactEventName}>`;
+    }).join(',\n');
 
-  const eventTypes =
-    events?.map(event => {
-      const eventName = getReactEventName(event.name);
-      const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text);
-      const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`;
+  component.events?.forEach(event => {
+    const eventName = getReactEventName(event.name);
+    const eventType = cleanGenericTypes(component.typeParameters, event.type.text);
+    const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`;
 
-      eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`);
-      return `${eventName}: EventName<${predefinedEventName}>`;
-    }) || [];
+    eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`);
+  });
 
   const importPath = path.replace(/^src\//, "").replace(/\.ts$/, "");
-  const typeName = componentName + "Type";
-  const formattedEventTypes = eventTypes.length ? `, {${eventTypes.join(", ")}}` : "";
-  const componentType = `${typeName}${formattedEventTypes}`;
 
-  importStatements.push(`import type ${typeName} from "./${importPath}";`);
-  exportStatements.push(`export declare type ${componentName} = ${typeName}`);
+  importStatements.push(`export type ${componentName} = import("./${importPath}").default;`);
+
+  const jsDoc = component.jsDoc || "";
 
   const source = `
-  ${jsDoc || ""}
+  ${jsDoc}
   export const ${componentName} = React.lazy(() =>
     customElements.whenDefined('${fileName}').then(() => ({
-      default: createComponent<${componentType}>({
+      default: createComponent({
         react: React,
         displayName: "${componentName}",
         tagName: "${fileName}",
-        elementClass: customElements.get("${fileName}"),
-        events: ${JSON.stringify(eventNames)},
+        elementClass: customElements.get("${fileName}") as Constructor<${componentName}>,
+        events: {
+          ${eventNames}
+        },
       })
     }))
   );
@@ -76,16 +74,19 @@ function getReactEventName(baklavaEventName) {
 }
 
 function writeBaklavaReactFile(fileContentParts) {
+  const constructorType = `type Constructor<T> = { new (): T };`;
+
   const content = [
     `/* eslint-disable @typescript-eslint/ban-ts-comment */`,
     `// @ts-nocheck`,
     ...importStatements,
     ...eventStatements,
+    constructorType,
     ...exportStatements,
     ...fileContentParts,
   ].join("\n\n");
 
-  const formattedContent = format(content, { parser: "typescript" });
+  const formattedContent = format(content, Object.assign(prettierConfig, { parser: "typescript" }));
   const outputPath = `${__dirname}/../src/baklava-react.ts`;
   fs.writeFileSync(outputPath, formattedContent);
 }

src/baklava.ts

@@ -23,4 +23,6 @@ export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
 export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
 export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
 export { default as BlSwitch } from "./components/switch/bl-switch";
+export { default as BlNotification } from "./components/notification/bl-notification";
+export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";

src/components/alert/bl-alert.css

@@ -4,8 +4,8 @@
 
 .alert {
   --padding: var(--bl-size-m);
-  --main-color: var(--bl-color-primary);
-  --main-bg-color: var(--bl-color-primary-contrast);
+  --main-color: var(--bl-color-info);
+  --main-bg-color: var(--bl-color-info-contrast);
 
   position: relative;
   display: flex;
@@ -14,7 +14,7 @@
   background-color: var(--main-bg-color);
   color: var(--bl-color-neutral-darker);
   box-shadow: inset 0 0 0 1px var(--main-color);
-  border-radius: var(--bl-border-radius-s);
+  border-radius: var(--bl-border-radius-l);
   padding: calc(var(--padding) / 2) var(--padding);
   padding-right: calc(var(--padding) / 2);
 }