Merge branch 'refs/heads/master' into elements-#1075-ino-nav-menu

nx.json

@@ -70,6 +70,11 @@
     "@nx/vite:test": {
       "cache": true,
       "inputs": ["default", "^production"]
+    },
+    "@nx/vite:build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
     }
   },
   "generators": {

package.json

@@ -52,20 +52,30 @@
     "@types/css-font-loading-module": "^0.0.7",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "29.5.11",
+    "@types/node": "18.16.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@types/shelljs": "^0.8.15",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/ui": "^1.3.1",
+    "autoprefixer": "^10.4.16",
     "camelcase": "^6.2.0",
     "chalk": "^4.1.2",
     "conventional-changelog-angular": "^7.0.0",
     "conventional-recommended-bump": "^9.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-playwright": "^0.15.3",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "fs-extra": "^9.0.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
@@ -79,13 +89,20 @@
     "postcss-url": "~10.1.3",
     "prettier": "^2.6.2",
     "prompts": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.55.0",
     "semver": "^7.5.4",
     "shelljs": "^0.8.4",
     "shx": "^0.3.2",
     "svgo": "^2.8.0",
+    "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
     "typescript": "~5.3.2",
     "vite": "~5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vitest": "^1.3.1",
     "yalc": "^1.0.0-pre.32"
   },
   "dependencies": {

packages/elements/src/components.d.ts

@@ -1045,9 +1045,11 @@ export namespace Components {
         "placement": Placement;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface InoNavDrawer {
         /**
@@ -2400,9 +2402,11 @@ declare global {
         "openChange": boolean;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface HTMLInoNavDrawerElement extends Components.InoNavDrawer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLInoNavDrawerElementEventMap>(type: K, listener: (this: HTMLInoNavDrawerElement, ev: InoNavDrawerCustomEvent<HTMLInoNavDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3989,9 +3993,11 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface InoNavDrawer {
         /**
@@ -5003,9 +5009,11 @@ declare module "@stencil/core" {
              */
             "ino-menu": LocalJSX.InoMenu & JSXBase.HTMLAttributes<HTMLInoMenuElement>;
             /**
-             * A navigation drawer component with different variants, setting up the base layout for your app.
+             * A navigation drawer component designed to organize and facilitate user navigation in your app.
              * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-             * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+             * Usage Note:
+             * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+             * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
              */
             "ino-nav-drawer": LocalJSX.InoNavDrawer & JSXBase.HTMLAttributes<HTMLInoNavDrawerElement>;
             /**

packages/elements/src/components/ino-button/ino-button.scss

@@ -62,6 +62,7 @@ ino-button {
   }
 
   .icon__wrapper {
+    display: inline-flex;
     height: 16px;
   }
 

packages/elements/src/components/ino-chip/ino-chip.scss

@@ -40,6 +40,9 @@ ino-chip {
     transition: ease-in-out 0.15s;
 
     .ino-chip-leading-icon {
+      display: flex;
+      justify-content: center;
+
       --ino-icon-width: #{$icon-size};
       --ino-icon-height: #{$icon-size};
     }