@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CHANGELOG.md

@@ -8,2 +8,15 @@ # Changelog
 
+## [v3.5.0] - 2021-07-14
+
+Renames a prop and adjusts error state for `TextInput`.
+
+### Breaking Changes
+
+- Change `error` prop to `hasError` on `TextInput` [#140](https://github.com/hypothesis/frontend-shared/pull/140)
+
+### Changed
+
+- Update structure of checkbox styling to match other patterns [#142](https://github.com/hypothesis/frontend-shared/pull/142)
+- Remediate broken tests using `assert.exists` [#141](https://github.com/hypothesis/frontend-shared/pull/141)
+
 ## [v3.4.0] - 2021-07-01
@@ -10,0 +23,0 @@

lib/components/TextInput.d.ts

@@ -6,6 +6,6 @@ /**
  * @prop {string} [classes] - Additional CSS classes to apply
- * @prop {boolean} [error] - There is an error associated with this input. Will
- *   set some error styling.
  * @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Optional ref for
  *   the rendered `input` element.
+ * @prop {boolean} [hasError] - There is an error associated with this input. Will
+ *   set some error styling.
  */
@@ -28,3 +28,3 @@ /**
  */
-export function TextInput({ classes, error, inputRef, ...restProps }: TextInputProps): any;
+export function TextInput({ classes, inputRef, hasError, ...restProps }: TextInputProps): any;
 /**
@@ -51,7 +51,2 @@ * A wrapping component for pairing a `TextInput` with an `IconButton` component.
     /**
-     * - There is an error associated with this input. Will
-     * set some error styling.
-     */
-    error?: boolean;
-    /**
      * - Optional ref for
@@ -61,2 +56,7 @@ * the rendered `input` element.
     inputRef?: import('preact').Ref<HTMLInputElement>;
+    /**
+     * - There is an error associated with this input. Will
+     * set some error styling.
+     */
+    hasError?: boolean;
 };
@@ -63,0 +63,0 @@ /**

lib/components/TextInput.js

@@ -32,6 +32,6 @@ "use strict";
  * @prop {string} [classes] - Additional CSS classes to apply
- * @prop {boolean} [error] - There is an error associated with this input. Will
- *   set some error styling.
  * @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Optional ref for
  *   the rendered `input` element.
+ * @prop {boolean} [hasError] - There is an error associated with this input. Will
+ *   set some error styling.
  */
@@ -60,10 +60,10 @@
     classes = '',
-    error,
-    inputRef
+    inputRef,
+    hasError = false
   } = _ref,
-      restProps = _objectWithoutProperties(_ref, ["classes", "error", "inputRef"]);
+      restProps = _objectWithoutProperties(_ref, ["classes", "inputRef", "hasError"]);
 
   return (0, _jsxDevRuntime.jsxDEV)("input", _objectSpread(_objectSpread({
     className: (0, _classnames.default)('Hyp-TextInput', {
-      'is-error': error
+      'has-error': hasError
     }, classes)
@@ -75,3 +75,3 @@ }, restProps), {}, {
     fileName: _jsxFileName,
-    lineNumber: 34,
+    lineNumber: 39,
     columnNumber: 5
@@ -104,3 +104,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 58,
+    lineNumber: 67,
     columnNumber: 5
@@ -107,0 +107,0 @@ }, this);

lib/pattern-library/components/patterns/FormComponents.js

@@ -25,2 +25,3 @@ "use strict";
   const [wantWatermelon, setWantWatermelon] = (0, _hooks.useState)(false);
+  const [textInputHasError, setTextInputHasError] = (0, _hooks.useState)(true);
   return (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternPage, {
@@ -35,3 +36,3 @@ title: "Forms",
         fileName: _jsxFileName,
-        lineNumber: 20,
+        lineNumber: 21,
         columnNumber: 9
@@ -51,3 +52,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
             fileName: _jsxFileName,
-            lineNumber: 30,
+            lineNumber: 31,
             columnNumber: 13
@@ -57,3 +58,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 26,
+          lineNumber: 27,
           columnNumber: 11
@@ -69,3 +70,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
             fileName: _jsxFileName,
-            lineNumber: 39,
+            lineNumber: 40,
             columnNumber: 13
@@ -75,3 +76,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 11
@@ -81,3 +82,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 25,
+        lineNumber: 26,
         columnNumber: 9
@@ -87,3 +88,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 19,
+      lineNumber: 20,
       columnNumber: 7
@@ -97,3 +98,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 52,
+          lineNumber: 53,
           columnNumber: 11
@@ -104,3 +105,3 @@ }, this), " is a basic wrapper around an", ' ', (0, _jsxDevRuntime.jsxDEV)("code", {
           fileName: _jsxFileName,
-          lineNumber: 53,
+          lineNumber: 54,
           columnNumber: 11
@@ -110,3 +111,3 @@ }, this), " field."]
         fileName: _jsxFileName,
-        lineNumber: 51,
+        lineNumber: 52,
         columnNumber: 9
@@ -120,3 +121,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
             fileName: _jsxFileName,
-            lineNumber: 57,
+            lineNumber: 58,
             columnNumber: 13
@@ -126,3 +127,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 56,
+          lineNumber: 57,
           columnNumber: 11
@@ -133,6 +134,6 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
             name: "my-input",
-            error: true
+            hasError: true
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 61,
+            lineNumber: 62,
             columnNumber: 13
@@ -142,3 +143,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 60,
+          lineNumber: 61,
           columnNumber: 11
@@ -148,3 +149,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 55,
+        lineNumber: 56,
         columnNumber: 9
@@ -154,3 +155,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 51,
       columnNumber: 7
@@ -164,3 +165,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 68,
+          lineNumber: 69,
           columnNumber: 36
@@ -170,3 +171,3 @@ }, this), " pattern: a text input on the left with an associated icon-only button on the right."]
         fileName: _jsxFileName,
-        lineNumber: 67,
+        lineNumber: 68,
         columnNumber: 9
@@ -178,3 +179,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", {
           fileName: _jsxFileName,
-          lineNumber: 73,
+          lineNumber: 74,
           columnNumber: 36
@@ -185,3 +186,3 @@ }, this), " variant of", ' ', (0, _jsxDevRuntime.jsxDEV)("code", {
           fileName: _jsxFileName,
-          lineNumber: 74,
+          lineNumber: 75,
           columnNumber: 11
@@ -191,3 +192,3 @@ }, this), "."]
         fileName: _jsxFileName,
-        lineNumber: 72,
+        lineNumber: 73,
         columnNumber: 9
@@ -202,3 +203,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
               fileName: _jsxFileName,
-              lineNumber: 79,
+              lineNumber: 80,
               columnNumber: 15
@@ -211,3 +212,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
               fileName: _jsxFileName,
-              lineNumber: 80,
+              lineNumber: 81,
               columnNumber: 15
@@ -217,3 +218,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 78,
+            lineNumber: 79,
             columnNumber: 13
@@ -223,13 +224,13 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 77,
+          lineNumber: 78,
           columnNumber: 11
         }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
-          details: "text input field in an error state",
+          details: "text input field in an error state; click button to toggle error state",
           children: (0, _jsxDevRuntime.jsxDEV)(_TextInput.TextInputWithButton, {
             children: [(0, _jsxDevRuntime.jsxDEV)(_TextInput.TextInput, {
               name: "my-input",
-              error: true
+              hasError: textInputHasError
             }, void 0, false, {
               fileName: _jsxFileName,
-              lineNumber: 86,
+              lineNumber: 87,
               columnNumber: 15
@@ -239,6 +240,7 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
               variant: "dark",
-              title: "go"
+              title: "go",
+              onClick: () => setTextInputHasError(!textInputHasError)
             }, void 0, false, {
               fileName: _jsxFileName,
-              lineNumber: 87,
+              lineNumber: 88,
               columnNumber: 15
@@ -248,3 +250,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 85,
+            lineNumber: 86,
             columnNumber: 13
@@ -254,3 +256,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 84,
+          lineNumber: 85,
           columnNumber: 11
@@ -260,3 +262,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 76,
+        lineNumber: 77,
         columnNumber: 9
@@ -266,3 +268,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 67,
       columnNumber: 7
@@ -272,3 +274,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 18,
+    lineNumber: 19,
     columnNumber: 5
@@ -275,0 +277,0 @@ }, this);

lib/pattern-library/components/patterns/FormPatterns.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _buttons = require("../../../components/buttons");
+var _ = require("../../../");
 
@@ -21,2 +21,101 @@ var _jsxDevRuntime = require("preact/compat/jsx-dev-runtime");
     children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
+      title: "Checkboxes",
+      children: [(0, _jsxDevRuntime.jsxDEV)("p", {
+        children: ["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ", (0, _jsxDevRuntime.jsxDEV)("code", {
+          children: "input"
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 16,
+          columnNumber: 44
+        }, this), "."]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 14,
+        columnNumber: 9
+      }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
+        children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "checkbox",
+          children: [(0, _jsxDevRuntime.jsxDEV)("input", {
+            className: "hyp-checkbox",
+            type: "checkbox"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 20,
+            columnNumber: 13
+          }, this), (0, _jsxDevRuntime.jsxDEV)(_.SvgIcon, {
+            name: "checkbox"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 21,
+            columnNumber: 13
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 19,
+          columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "checkbox, checked",
+          children: [(0, _jsxDevRuntime.jsxDEV)("input", {
+            className: "hyp-checkbox",
+            type: "checkbox",
+            checked: true
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 25,
+            columnNumber: 13
+          }, this), (0, _jsxDevRuntime.jsxDEV)(_.SvgIcon, {
+            name: "checkbox"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 26,
+            columnNumber: 13
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 24,
+          columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "checkbox with label",
+          children: (0, _jsxDevRuntime.jsxDEV)("label", {
+            className: "hyp-label",
+            children: [(0, _jsxDevRuntime.jsxDEV)("input", {
+              className: "hyp-checkbox",
+              type: "checkbox"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 31,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_.SvgIcon, {
+              name: "checkbox"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 32,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)("span", {
+              children: "Click me, please"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 33,
+              columnNumber: 15
+            }, this)]
+          }, void 0, true, {
+            fileName: _jsxFileName,
+            lineNumber: 30,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 29,
+          columnNumber: 11
+        }, this)]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 18,
+        columnNumber: 9
+      }, this)]
+    }, void 0, true, {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 7
+    }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
       title: "Text inputs",
@@ -28,3 +127,3 @@ children: [(0, _jsxDevRuntime.jsxDEV)("p", {
           fileName: _jsxFileName,
-          lineNumber: 15,
+          lineNumber: 41,
           columnNumber: 25
@@ -34,3 +133,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 14,
+        lineNumber: 40,
         columnNumber: 9
@@ -46,3 +145,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
             fileName: _jsxFileName,
-            lineNumber: 19,
+            lineNumber: 45,
             columnNumber: 13
@@ -52,3 +151,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 18,
+          lineNumber: 44,
           columnNumber: 11
@@ -58,3 +157,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
           children: (0, _jsxDevRuntime.jsxDEV)("input", {
-            className: "hyp-text-input is-error",
+            className: "hyp-text-input has-error",
             type: "text",
@@ -64,3 +163,3 @@ placeholder: "http://www.example.com"
             fileName: _jsxFileName,
-            lineNumber: 26,
+            lineNumber: 52,
             columnNumber: 13
@@ -70,3 +169,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 25,
+          lineNumber: 51,
           columnNumber: 11
@@ -76,3 +175,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 43,
         columnNumber: 9
@@ -82,3 +181,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 13,
+      lineNumber: 39,
       columnNumber: 7
@@ -91,3 +190,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 61,
         columnNumber: 9
@@ -107,5 +206,5 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
               fileName: _jsxFileName,
-              lineNumber: 45,
+              lineNumber: 71,
               columnNumber: 15
-            }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               icon: "arrow-right",
@@ -116,3 +215,3 @@ title: "go",
               fileName: _jsxFileName,
-              lineNumber: 46,
+              lineNumber: 72,
               columnNumber: 15
@@ -122,3 +221,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 44,
+            lineNumber: 70,
             columnNumber: 13
@@ -128,3 +227,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 40,
+          lineNumber: 66,
           columnNumber: 11
@@ -141,8 +240,8 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
               placeholder: "http://www.example.com",
-              className: "is-error"
+              className: "has-error"
             }, void 0, false, {
               fileName: _jsxFileName,
-              lineNumber: 55,
+              lineNumber: 81,
               columnNumber: 15
-            }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               icon: "arrow-right",
@@ -153,3 +252,3 @@ title: "go",
               fileName: _jsxFileName,
-              lineNumber: 60,
+              lineNumber: 86,
               columnNumber: 15
@@ -159,3 +258,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 54,
+            lineNumber: 80,
             columnNumber: 13
@@ -165,3 +264,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 50,
+          lineNumber: 76,
           columnNumber: 11
@@ -171,3 +270,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 39,
+        lineNumber: 65,
         columnNumber: 9
@@ -177,3 +276,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 60,
       columnNumber: 7
@@ -180,0 +279,0 @@ }, this)]

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause",

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

620776

increased by1.11%

Lines of code

8430

increased by1.21%

No dependency changes