react-likert-scale - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

CHANGELOG.md

@@ -9,11 +9,15 @@ Changelog
 
+[4.1.0]
+----------------------------
 
-[upcoming]
+### Added
+  * Add prop `layout` to control position of the Question text. Valid values are `auto` (default)
+    and `stacked`.
+
+[4.0.1]
 ----------------------------
 
-  * Example formatting in a grid.
-
 ### Added
-
   * You can now have a radio button pre-checked on first render.
+  * Documentation: example formatting in a grid.
 
@@ -29,3 +33,2 @@ ### Changed
 ### Added
-
   * Prop `flexible` controls the spacing between likert options. Set to 0 or `false` to pack the
@@ -36,3 +39,2 @@ likert options as close together as possible. This is useful when you have several questions
 ### Changed
-
   * The look-and-feel of the question and responses have been updated to look better when there are
@@ -42,3 +44,2 @@ several questions.
 ### Breaking changes
-
   * The `onChange` callback will now receive the `responses` object instead of just the response
@@ -52,11 +53,8 @@ `value`. This makes it easier to get the `text`.
 ### Added
-
   * Unit testing has been added to this repo.
 
 ### Changed
-
   * Updated all dependencies and fixed a warning with the Webpack dev server.
 
 ### Deprecations
-
   * The `picked()` prop has been renamed to `onChange()`.
@@ -69,3 +67,2 @@
 ### Changes
-
   * The code is now minified.
@@ -72,0 +69,0 @@ * The two dependencies have been removed.

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  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){let t;super(e),n(this,"onChange",(e=>{this.setState({checkedIndex:parseInt(e.target.getAttribute("data-index"))}),"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)))),Array.isArray(e.responses)&&(t=e.responses.findIndex((e=>e.checked))),this.state={isKeyboardUser:!1,checkedIndex:t},e.id?this.id=e.id:e.question?this.id=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(e.question):this.id=Date.now()}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{responses:n,question:i,flexible:r=!0,className:s="",likertRef:a,...o}=this.props;delete o.picked,delete o.onChange;let l=null;r||(l={flexGrow:0}),"number"==typeof r&&4!==parseInt(r)&&(l={flexGrow:parseInt(r)});const d=n.map(((n,t)=>{const i="".concat(this.id).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:this.id,id:i,className:"visuallyHidden","data-index":t,onChange:this.onChange,checked:this.state.checkedIndex===t}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let c="likertScale";return c+=s?" ".concat(s):"",c+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:c,ref:a,id:this.id},o,{"aria-labelledby":"legend-".concat(this.id)}),i&&e.createElement("div",{id:"legend-".concat(this.id),className:"likertLegend"},i),e.createElement("div",{className:"likertBand",style:l},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.likertScale.layout--stacked {\n  flex-direction: column;\n  align-items: flex-start;\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.layout--stacked .likertBand {\n  align-self: stretch;\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){let t;super(e),n(this,"onChange",(e=>{this.setState({checkedIndex:parseInt(e.target.getAttribute("data-index"))}),"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)))),Array.isArray(e.responses)&&(t=e.responses.findIndex((e=>e.checked))),this.state={isKeyboardUser:!1,checkedIndex:t},e.id?this.id=e.id:e.question?this.id=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(e.question):this.id=Date.now()}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{responses:n,question:i,layout:r="auto",flexible:s=!0,className:a="",likertRef:o,...l}=this.props;delete l.picked,delete l.onChange;let d=null;s||(d={flexGrow:0}),"number"==typeof s&&4!==parseInt(s)&&(d={flexGrow:parseInt(s)});const c=n.map(((n,t)=>{const i="".concat(this.id).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:this.id,id:i,className:"visuallyHidden","data-index":t,onChange:this.onChange,checked:this.state.checkedIndex===t}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let p="likertScale";return p+=a?" ".concat(a):"",p+=this.state.isKeyboardUser?" isKeyboardUser":"",p+="stacked"===r?" layout--stacked":"",e.createElement("fieldset",t({className:p,ref:o,id:this.id},l,{"aria-labelledby":"legend-".concat(this.id)}),i&&e.createElement("div",{id:"legend-".concat(this.id),className:"likertLegend"},i),e.createElement("div",{className:"likertBand",style:d},c))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r;

package.json

 {
   "name": "react-likert-scale",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "A React component that makes a Likert Scale for surveys or data collection.",
@@ -42,5 +42,5 @@ "comments": [
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/preset-env": "^7.12.16",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
@@ -52,14 +52,14 @@ "@rollup/plugin-babel": "^5.3.0",
     "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.7.1",
+    "@testing-library/user-event": "^13.0.0",
     "@webpack-cli/serve": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "css-loader": "^5.0.2",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-jest": "^24.1.3",
+    "css-loader": "^5.1.3",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-jest": "^24.3.2",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^5.1.0",
+    "html-webpack-plugin": "^5.3.1",
     "jest": "^26.6.3",
@@ -69,7 +69,7 @@ "prettier": "^2.2.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.39.0",
+    "rollup": "^2.41.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "style-loader": "^2.0.0",
-    "webpack": "^5.21.2",
+    "webpack": "^5.26.2",
     "webpack-cli": "^4.5.0",
@@ -76,0 +76,0 @@ "webpack-dev-server": "^3.11.2"

README.md

@@ -77,2 +77,7 @@ React Likert Scale
 
+* `layout` (string) This controls the position of the Question text. Valid values are `auto` (the
+  default) and `stacked`. Auto-layout will position the question text and likert scale on the same
+  line when there is enought horizontal space. If the screen is too narrow the question will appear
+  above the likert scale. Set `layout='stacked'` if you always want the question to appear above the
+  likert scale.
 * `flexible` (boolean|integer) This controls the type of layout. When `flexible` is set to `true`,
@@ -83,4 +88,6 @@ which is the default setting, the radio buttons will stretch to fill available space. The question
   use a minimum amount of space at all times. _Passing in an integer is an advanced use-case and frankly isn’t of much value. See the source code for more info. The integer is used as a `flex-grow` value._
-* `className` (string) You can use this to apply custom CSS. You class name will be put on a `<fieldset>` element, which is the top-level element of this component.
-* `ref` (React ref) For advanced use-cases, you may need a reference to the DOM element itself. Pass in a [React ref](https://reactjs.org/docs/refs-and-the-dom.html).
+* `className` (string) You can use this to apply custom CSS. You class name will be put on a
+  `<fieldset>` element, which is the top-level element of this component.
+* `ref` (React ref) For advanced use-cases, you may need a reference to the DOM element itself. Pass
+  in a [React ref](https://reactjs.org/docs/refs-and-the-dom.html).
 * DOM attributes such as `id`, `disabled`, `data-*`, `onClick`, etc. These will get applied to a `<fieldset>` element.
@@ -87,0 +94,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

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

24316

increased by3.35%

Number of lines in readme file

160

increased by4.58%

No dependency changes