@code.gov/code-gov-style - npm Package Compare versions

Comparing version 1.7.2 to 1.7.3

assets/js/web_components.js

@@ -69,2 +69,24 @@ 'use strict';
 
+        parseOptions() {
+          const rawOptions = this.getAttribute('options');
+          let parsedOptions = null;
+          try {
+            parsedOptions = JSON.parse(rawOptions);
+          } catch (error) {
+            console.error("[filter-box] failed to parse rawOptions:", rawOptions);
+            throw error;
+          }
+          if (parsedOptions) {
+            this.options = parsedOptions.map(option => {
+              if (typeof option === "object" && option.name && option.value) {
+                return { name: option.name, value: option.value, selected: false };
+              } else {
+                return { name: option, value: option, selected: false };
+              }
+            });
+          } else {
+            this.options = [];
+          }          
+        }
+
         update() {
@@ -80,17 +102,3 @@
             this.title = this.getAttribute('title');
-            const rawOptions = this.getAttribute('options');
-            let parsedOptions = null;
-            try {
-              parsedOptions = JSON.parse(rawOptions);
-            } catch (error) {
-              console.error("[filter-box] failed to parse rawOptions:", rawOptions);
-              throw error;
-            }
-            if (parsedOptions) {
-              this.options = parsedOptions.map(option => {
-                return { name: option, value: option, selected: false };
-              });
-            } else {
-              this.options = [];
-            }
+            this.parseOptions();
 
@@ -97,0 +105,0 @@ container.className = "filter-box";

assets/js/web_components/filter_box.js

@@ -69,2 +69,24 @@ 'use strict';
 
+        parseOptions() {
+          const rawOptions = this.getAttribute('options');
+          let parsedOptions = null;
+          try {
+            parsedOptions = JSON.parse(rawOptions);
+          } catch (error) {
+            console.error("[filter-box] failed to parse rawOptions:", rawOptions);
+            throw error;
+          }
+          if (parsedOptions) {
+            this.options = parsedOptions.map(option => {
+              if (typeof option === "object" && option.name && option.value) {
+                return { name: option.name, value: option.value, selected: false };
+              } else {
+                return { name: option, value: option, selected: false };
+              }
+            });
+          } else {
+            this.options = [];
+          }          
+        }
+
         update() {
@@ -80,17 +102,3 @@
             this.title = this.getAttribute('title');
-            const rawOptions = this.getAttribute('options');
-            let parsedOptions = null;
-            try {
-              parsedOptions = JSON.parse(rawOptions);
-            } catch (error) {
-              console.error("[filter-box] failed to parse rawOptions:", rawOptions);
-              throw error;
-            }
-            if (parsedOptions) {
-              this.options = parsedOptions.map(option => {
-                return { name: option, value: option, selected: false };
-              });
-            } else {
-              this.options = [];
-            }
+            this.parseOptions();
 
@@ -97,0 +105,0 @@ container.className = "filter-box";

components/filter.md

@@ -9,5 +9,5 @@ ---
 
-<p>Below you will find the buttons used by code.gov</p>
+<p>Below you will find the filter boxes used by code.gov</p>
 
-# Normal Button
+# Simple Filter Box
 <filter-box
@@ -23,1 +23,14 @@ title="Computer Language"
 ```
+
+# Advanced Filter Box
+You can also pass in a JSON that specifies the display name and value for each option in the selection.
+<filter-box
+  title="Organization Type"
+  options='[{"name":"Federal Government","value":"federal"},{"name":"State Government","value":"state"},{"name":"Local Government","value":"local"}]'
+></filter-box>
+```
+<filter-box
+  title="Organization Type"
+  options='[{"name":"Federal Government","value":"federal"},{"name":"State Government","value":"state"},{"name":"Local Government","value":"local"}]'
+></filter-box>
+```

package.json

 {
   "name": "@code.gov/code-gov-style",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

476396

increased by0.23%

Lines of code

1066

increased by1.33%

No dependency changes