react-likert-scale - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0-1

CHANGELOG.md

@@ -9,2 +9,21 @@ Changelog
 
+[upcoming]
+
+### Added
+
+  * Prop `flexible` controls the spacing between likert options. Set to 0 or `false` to pack the
+    likert options as close together as possible. This is useful when you have several questions
+    that all have the same set of options. The default is true.
+
+### Changed
+
+  * The look-and-feel of the question and responses have been updated to look better when there are
+    several questions.
+
+### Breaking changes
+
+  * The `onChange` callback will now receive the `responses` object instead of just the response
+    `value`. This makes it easier to get the `text`.
+
+
 [3.0.2] - 2021-01-22
@@ -11,0 +30,0 @@

dist/likert.es.js

@@ -1,1 +0,1 @@
-import e from"react";function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".likertScale {\n  margin-bottom: 1em;\n}\n.likertBand {\n  display: flex;\n  padding-top: 1em;\n}\n.likertResponse {\n  flex: 1 1 5em;\n  text-align: center;\n  position: relative;\n}\n.likertLine {\n  display: inline-block;\n  width: 50%;\n  vertical-align: top;\n  margin-top: 0.5em;\n  border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n  visibility: hidden;\n}\n.likertResponse:last-child > .likertLine:nth-child(2) {\n  visibility: hidden;\n}\n.likertIndicator {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 0.5em;\n  border: thin solid #006fc4;\n  background-color: #faeabd;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 0;\n  box-sizing: border-box;\n}\n.likertResponse:hover .likertIndicator {\n  background-color: white;\n  border-width: 3px;\n}\n.likertText {\n  display: inline-block;\n  padding-top: 0.4em;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertText {\n  /* Show outline for keyboard users. */\n  box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse > input:checked + .likertIndicator {\n  background-color: #006fc4;\n}\n.visuallyHidden {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n}\n\n@media only print {\n  .likertResponse > input:checked + .likertIndicator {\n    border-width: 0.5em !important;\n    border-color: black !important;\n  }\n}\n");class i extends e.Component{constructor(e){super(e),n(this,"onChange",(e=>{"function"==typeof this.props.onChange?this.props.onChange(e.target.value):"function"==typeof this.props.picked&&(console.warn("Deprecation: The “picked” callback has been renamed; use “onChange” instead."),this.props.picked(e.target.value))})),n(this,"listenForTab",(e=>{"Tab"===e.key&&this.setState({isKeyboardUser:!0})})),this.state={isKeyboardUser:!1}}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{question:n,responses:i,id:r,className:o="",likertRef:a,...l}=this.props;delete l.picked,delete l.onChange;const s=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(n),d=i.map(((n,t)=>{const i="".concat(s).concat(t);return e.createElement("label",{key:i,htmlFor:i,className:"likertResponse"},e.createElement("span",{className:"likertLine"}),e.createElement("span",{className:"likertLine"}),e.createElement("input",{type:"radio",value:n.value,name:s,id:i,className:"visuallyHidden",onClick:this.onChange}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let c="likertScale";return c+=o?" ".concat(o):"",c+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:c,ref:a,id:r||s},l),e.createElement("legend",null,n),e.createElement("div",{className:"likertBand"},d))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r;
+import e from"react";function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".likertScale {\n  margin-bottom: 1em;\n  border: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n.likertLegend {\n  flex: 1 1 auto;\n}\n.likertBand {\n  flex-grow: 4; /* This can get overridden by the “flexible” prop. */\n  flex-shrink: 0;\n  flex-basis: auto;\n\n  display: flex;\n  padding-top: 0.6em;\n}\n.likertResponse {\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: 0; /* never set to auto */\n  min-width: 1.6em;\n  text-align: center;\n  position: relative;\n}\n.likertLine {\n  display: inline-block;\n  width: 50%;\n  vertical-align: top;\n  margin-top: 0.5em;\n  border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n  visibility: hidden;\n}\n.likertResponse:last-child > .likertLine:nth-child(2) {\n  visibility: hidden;\n}\n.likertIndicator {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 0.5em;\n  border: thin solid #006fc4;\n  background-color: #faeabd;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 0;\n  box-sizing: border-box;\n  transition: all linear 200ms;\n}\n.likertResponse:hover .likertIndicator {\n  background-color: white;\n  border-width: 3px;\n  transition: all linear 200ms;\n}\n.likertText {\n  display: inline-block;\n  padding-top: 0.4em;\n  padding-left: 0.4em;\n  padding-right: 0.4em;\n  width: 100%;\n  box-sizing: border-box;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertIndicator {\n  /* Show outline for keyboard users. */\n  box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse > input:checked + .likertIndicator {\n  background-color: #006fc4;\n}\n.visuallyHidden {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n}\n\n@media only print {\n  .likertResponse > input:checked + .likertIndicator {\n    border-width: 0.5em !important;\n    border-color: black !important;\n  }\n}\n");class i extends e.Component{constructor(e){super(e),n(this,"onChange",(e=>{"function"==typeof this.props.onChange?this.props.onChange(this.getResponsesItem(e.target.value)):"function"==typeof this.props.picked&&(console.warn("Deprecation: The “picked” callback has been renamed; use “onChange” instead."),this.props.picked(this.getResponsesItem(e.target.value)))})),n(this,"listenForTab",(e=>{"Tab"===e.key&&this.setState({isKeyboardUser:!0})})),n(this,"getResponsesItem",(e=>this.props.responses.find((n=>n.value==e)))),this.state={isKeyboardUser:!1}}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{question:n,responses:i,flexible:r=!0,id:o,className:a="",likertRef:s,...l}=this.props;delete l.picked,delete l.onChange;let d=null;r||(d={flexGrow:0}),"number"==typeof r&&4!==parseInt(r)&&(d={flexGrow:parseInt(r)});const c=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(n),p=i.map(((n,t)=>{const i="".concat(c).concat(t);return e.createElement("label",{key:i,htmlFor:i,className:"likertResponse"},e.createElement("span",{className:"likertLine"}),e.createElement("span",{className:"likertLine"}),e.createElement("input",{type:"radio",value:n.value,name:c,id:i,className:"visuallyHidden",onClick:this.onChange}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let h="likertScale";return h+=a?" ".concat(a):"",h+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:h,ref:s,id:o||c},l,{"aria-labelledby":"legend-".concat(c)}),e.createElement("div",{id:"legend-".concat(c),className:"likertLegend"},n),e.createElement("div",{className:"likertBand",style:d},p))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r;

package.json

 {
   "name": "react-likert-scale",
-  "version": "3.0.2",
+  "version": "4.0.0-1",
   "description": "A React component that makes a Likert Scale for collecting data.",
@@ -5,0 +5,0 @@ "comments": [

README.md

@@ -14,3 +14,5 @@ React Likert Scale
 
+A live [demo is on CodePen](https://codepen.io/craig-creeger/pen/WNGaJxe).
 
+
 ## Installation
@@ -17,0 +19,0 @@

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20394

increased by8.12%

Lines of code

17

increased by21.43%

Number of lines in readme file

122

increased by1.67%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes