@springernature/global-dropdown - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0

demo/context.json

 {
-  "dynamicPartials": {
-    "dropdown": "./toolkits/global/packages/global-dropdown/view/dropdown.hbs"
-  }
+	"iconURL": "../../img/chevron-more.svg#i-chevron-more",
+	"dynamicPartials": {
+		"dropdown": "./toolkits/global/packages/global-dropdown/view/dropdown.hbs"
+	}
 }

HISTORY.md

 # History
 
+## 1.0.0 (2021-10-27)
+    * Update styling to use a more complete set of default variables
+    * Add nature settings
+    * Update demo to use svg for icon
+
 ## 0.5.0 (2021-10-26)
@@ -4,0 +9,0 @@ * Move consumable template to `view` and link to `demo` folder

package.json

 {
   "name": "@springernature/global-dropdown",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "license": "MIT",
   "description": "Display a contextual list of links controlled by a toggle",
   "keywords": [],
-  "author": "Springer Nature"
+  "author": "Springer Nature",
+  "brandContext": "16.0.0",
+  "dependencies": {
+    "@springernature/brand-context": "16.0.0"
+  },
+  "scripts": {
+    "postinstall": "npm_config_registry=https://registry.npmjs.org/ npx @springernature/util-context-warning@0.0.5 -p @springernature/global-dropdown@1.0.0 -v 16.0.0"
+  }
 }

README.md

@@ -1,8 +0,41 @@
-## Global Dropdown
+# Global Dropdown
 
-This is a generic dropdown component. It is not a `<select>`, but rather a list which is expanded when the user clicks a button.
+Global branded dropdown
 
-The component is keyboard navigable.
+## CSS
 
+Include the SCSS in your application
+
+```scss
+// Pick ONE of the brands below to include
+@import '@springernature/global-dropdown/scss/10-settings/default';
+@import '@springernature/global-dropdown/scss/10-settings/nature';
+
+// Include this with your other components
+@import '@springernature/global-dropdown/scss/50-components/dropdown';
 ```
+
+## Example usage
+
+The core experience will show a label and a list of items underneath. JavaScript and more advanced CSS options are available by using the class `.js` on the document root element.
+
+```html
+<div class="c-dropdown">
+    <span class="c-dropdown__label">dropdown</span>
+    <button class="c-dropdown__button" aria-expanded="false" data-dropdown>Dropdown
+        <svg aria-hidden="true" width="10" height="10" aria-hidden="true" focusable="false">
+            <use xlink:href="i-chevron-more"></use>
+        </svg>
+    </button>
+    <ul class="c-dropdown__menu">
+        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 1</a></li>
+        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 2</a></li>
+        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 3</a></li>
+    </ul>
+</div>
+```
+
+### Enhanced dropdown
+
+```
 init(dropdownSelector = '[data-dropdown]', itemSelector = '[data-dropdown-item]') 
@@ -13,5 +46,1 @@ ```
 The first argument is a CSS selector to target the dropdown button. The second argument is a CSS selector to target items inside the list.
-
-## Dependencies
-This component relies on classes from the global-css-utilities package. Make sure you import `hiding.scss` and `transforms.scss`. 
-   

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20488

increased by27.71%

Number of package files

15

increased by15.38%

Lines of code

151

increased by0.67%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

46

increased by170.59%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@springernature/brand-context@16.0.0

• + Added@springernature/brand-context@16.0.0(transitive)