@one-platform/opc-menu-drawer - npm Package Compare versions

Comparing version 0.0.1-prerelease to 0.1.1-prerelease

declaration.d.ts

@@ -6,2 +6,3 @@ declare module '*.scss';
   links: OpcMenuDrawerLink[];
+  isSearchable?: boolean;
 };
@@ -8,0 +9,0 @@

dist/opc-menu-drawer.js.LICENSE.txt

@@ -12,1 +12,7 @@ /**
  */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */

package.json

 {
   "name": "@one-platform/opc-menu-drawer",
-  "version": "0.0.1-prerelease",
+  "version": "0.1.1-prerelease",
   "description": "opc-menu-drawer is a customizable drawer web component which shows the menu's and user profile",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -30,10 +30,10 @@ # opc-menu-drawer Component 👋
 
-<!-- 1. opc-menu-drawer with header -->
+<!-- 1. opc-menu-drawer with menu -->
 
 <details>
-<summary>opc-menu-drawer with header</summary>
+<summary>opc-menu-drawer with menu</summary>
 
 ## Details
 
-The header is the topmost element seen on the drawer body. It contains a collapsable box with a title from the attribute `headerTitle` and an optional slot `avatar` to provide an avatar of the user. The header also accepts buttons through the slot `menu` that provide primary actions of the drawer, which is revealed by expanding the header title. The header container could be replaced with the slot `header`.
+The menu is the bottom element seen on the drawer body. It contains a collapsable box with a title from the attribute `menuTitle` and an optional slot `avatar` to provide an avatar of the user. The header also accepts buttons through the slot `menu` that provide primary actions of the drawer, which is revealed by expanding the header title. The header container could be replaced with the slot `header`.
 
@@ -43,3 +43,3 @@ ### Code
 ```html
-<opc-menu-drawer headerTitle="Akhil Mohan">
+<opc-menu-drawer menuTitle="Akhil Mohan">
   <span slot="avatar">AM</span>
@@ -54,14 +54,2 @@ <button slot="menu">Log In</button>
 
-### Screenshot
-
-#### opc-menu-drawer with header collapsed
-
-![Image of opc-menu-drawer with ](./docs/opc-menu-drawer-header-collapsed.png)
-
-#### opc-menu-drawer with header expanded
-
-![Image of opc-menu-drawer with ](./docs/opc-menu-drawer-header-expanded.png)
-
-</details>
-
 <!-- 2. opc-menu-drawer with links -->
@@ -74,3 +62,3 @@
 
-The drawer component accepts links grouped into categories for users to navigate easily. Links can be set via the `links` attribute. When the links are more than 5 for a group, the rest of them will be hidden in a collapsable box. It can be revealed by clicking on the show more button for that category.
+The drawer component accepts links grouped into categories for users to navigate easily. Links can be set via the `links` attribute. When the links are more than 5 for a group, the rest of them will be hidden in a collapsable box. It can be revealed by clicking on the show more button for that category. Links also accept an `isSearchable` which enables a search component to easily find when links are long
 
@@ -82,3 +70,3 @@ The default slot gets passed to the drawer body. It will be shown after the links section if links are provided.
 ```html
-<opc-menu-drawer headerTitle="Akhil Mohan">
+<opc-menu-drawer menuTitle="Akhil Mohan">
   <span slot="avatar">AM</span>
@@ -95,2 +83,3 @@ <div>
     title: 'BUILT-IN SERVICES',
+    isSearchable: true,
     links: [
@@ -120,8 +109,2 @@ { name: 'Blog', href: '#' },
 
-### Screenshot
-
-#### opc-menu-drawer with links
-
-![Image of opc-menu-drawer with links](./docs/opc-menu-drawer-links.png)
-
 </details>
@@ -141,3 +124,3 @@
 ```html
-<opc-menu-drawer headerTitle="Akhil Mohan">
+<opc-menu-drawer menuTitle="Akhil Mohan">
   <span slot="avatar">AM</span>
@@ -152,8 +135,2 @@ <span slot="footer">2021 Red Hat </span>
 
-### Screenshot
-
-#### opc-menu-drawer with footer
-
-![Image of opc-menu-drawer with ](./docs/opc-menu-drawer-footer.png)
-
 </details>
@@ -169,2 +146,4 @@
 
+- `header-body`: Body component for the header. Eg: Filter chips can be placed here
+
 - `avatar`: The avatar component on drawer header.
@@ -185,2 +164,3 @@
     title: "BUILT-IN SERVICES",
+    isSearchable:true,
     links: [
@@ -193,8 +173,16 @@ { name: "Blog#2", href: "#" },
 
-- `headerTitle`
+- `title`
   - Type: `String`
+  - Default value: `Menu`
+
+```html
+  <opc-menu-drawer title="Menu Drawer"></opc-menu-drawer isOpen>
+```
+
+- `menuTitle`
+  - Type: `String`
   - Default value: `''`
 
 ```html
-  <opc-menu-drawer headerTitle="Akhil Mohan"></opc-menu-drawer isOpen>
+  <opc-menu-drawer menuTitle="Akhil Mohan"></opc-menu-drawer isOpen>
 ```
@@ -272,3 +260,3 @@
 | `--opc-menu-drawer__z-index`                | 9                 |
-| ` --opc-menu-drawer__width`                 | 260px             |
+| ` --opc-menu-drawer__width`                 | 360px             |
 | `--opc-menu-drawer__top`                    | 0px               |
@@ -275,0 +263,0 @@ | `--opc-menu-drawer__right`                  | #000              |

No alert changes

Improved metrics

Lines of code

315

increased by29.63%

Worsened metrics

Total package byte prevSize

147115

decreased by-66.68%

Number of package files

10

decreased by-28.57%

Number of lines in readme file

344

decreased by-3.37%

No dependency changes