@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [v4.2.0] - 2021-11-12
+
+- Update Spinner and add FullScreenSpinner pattern and component [#237](https://github.com/hypothesis/frontend-shared/pull/237)
+- Add types for SVG "modules" [#230](https://github.com/hypothesis/frontend-shared/pull/230)
+- Fix demo-source layout and a wayward font rule [#231](https://github.com/hypothesis/frontend-shared/pull/231)
+
 ## [v4.1.0] - 2021-11-01
@@ -10,0 +16,0 @@

lib/components/Spinner.d.ts

@@ -8,2 +8,7 @@ /**
 /**
+ * @typedef FullScreenSpinnerProps
+ * @prop {string} [classes] - Additional CSS classes to apply
+ * @prop {string} [containerClasses] - CSS classes to apply to wrapping element.
+ */
+/**
  * Loading indicator.
@@ -14,2 +19,8 @@ *
 export function Spinner({ classes, size }: SpinnerProps): import("preact").JSX.Element;
+/**
+ * Full-screen loading indicator.
+ *
+ * @param {FullScreenSpinnerProps} props
+ */
+export function FullScreenSpinner({ classes, containerClasses }: FullScreenSpinnerProps): import("preact").JSX.Element;
 export type SpinnerProps = {
@@ -26,1 +37,11 @@ /**
 };
+export type FullScreenSpinnerProps = {
+    /**
+     * - Additional CSS classes to apply
+     */
+    classes?: string | undefined;
+    /**
+     * - CSS classes to apply to wrapping element.
+     */
+    containerClasses?: string | undefined;
+};

lib/components/Spinner.js

@@ -5,3 +5,4 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js";
 import spinnerSVG from '../../images/icons/spinner--spokes.svg';
-import { registerIcon, SvgIcon } from './SvgIcon'; // Register the spinner icon for use
+import { Icon } from './Icon';
+import { registerIcon } from './SvgIcon'; // Register the spinner icon for use
 
@@ -18,2 +19,8 @@ import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 /**
+ * @typedef FullScreenSpinnerProps
+ * @prop {string} [classes] - Additional CSS classes to apply
+ * @prop {string} [containerClasses] - CSS classes to apply to wrapping element.
+ */
+
+/**
  * Loading indicator.
@@ -29,11 +36,37 @@ *
   const baseClass = `Hyp-Spinner--${size}`;
-  return _jsxDEV(SvgIcon, {
+  return _jsxDEV(Icon, {
     name: spinnerIcon,
-    className: classnames(baseClass, classes)
+    containerClasses: classnames(baseClass, classes)
   }, void 0, false, {
     fileName: _jsxFileName,
-    lineNumber: 25,
+    lineNumber: 32,
     columnNumber: 5
   }, this);
 }
+/**
+ * Full-screen loading indicator.
+ *
+ * @param {FullScreenSpinnerProps} props
+ */
+
+export function FullScreenSpinner({
+  classes = '',
+  containerClasses = ''
+}) {
+  return _jsxDEV("div", {
+    className: classnames('Hyp-FullScreenSpinner', containerClasses),
+    children: _jsxDEV(Spinner, {
+      classes: classnames('Hyp-FullScreenSpinner__spinner', classes),
+      size: "large"
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 7
+    }, this)
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 46,
+    columnNumber: 5
+  }, this);
+}
 //# sourceMappingURL=Spinner.js.map

lib/icons.d.ts

@@ -1,1 +0,92 @@
-export {};
+export { default as annotate } from "../images/icons/annotate.svg";
+export { default as annotateAlt } from "../images/icons/annotate-alt.svg";
+export { default as arrowDown } from "../images/icons/arrow-down.svg";
+export { default as arrowLeft } from "../images/icons/arrow-left.svg";
+export { default as arrowRight } from "../images/icons/arrow-right.svg";
+export { default as arrowUp } from "../images/icons/arrow-up.svg";
+export { default as bookmark } from "../images/icons/bookmark.svg";
+export { default as bookmarkFilled } from "../images/icons/bookmark-filled.svg";
+export { default as cancel } from "../images/icons/cancel.svg";
+export { default as caretDown } from "../images/icons/caret-down.svg";
+export { default as caretLeft } from "../images/icons/caret-left.svg";
+export { default as caretRight } from "../images/icons/caret-right.svg";
+export { default as caretUp } from "../images/icons/caret-up.svg";
+export { default as caution } from "../images/icons/caution.svg";
+export { default as ccStd } from "../images/icons/cc-std.svg";
+export { default as ccStdFilled } from "../images/icons/cc-std-filled.svg";
+export { default as ccZero } from "../images/icons/cc-zero.svg";
+export { default as ccZeroFilled } from "../images/icons/cc-zero-filled.svg";
+export { default as check } from "../images/icons/check.svg";
+export { default as collapse } from "../images/icons/collapse.svg";
+export { default as contrast } from "../images/icons/contrast.svg";
+export { default as copy } from "../images/icons/copy.svg";
+export { default as copyFilled } from "../images/icons/copy-filled.svg";
+export { default as edit } from "../images/icons/edit.svg";
+export { default as editorLatex } from "../images/icons/editor-latex.svg";
+export { default as editorQuote } from "../images/icons/editor-quote.svg";
+export { default as editorTextBold } from "../images/icons/editor-text-bold.svg";
+export { default as editorTextItalic } from "../images/icons/editor-text-italic.svg";
+export { default as ellipsis } from "../images/icons/ellipsis.svg";
+export { default as email } from "../images/icons/email.svg";
+export { default as emailFilled } from "../images/icons/email-filled.svg";
+export { default as expand } from "../images/icons/expand.svg";
+export { default as external } from "../images/icons/external.svg";
+export { default as fileCode } from "../images/icons/file-code.svg";
+export { default as fileCodeFilled } from "../images/icons/file-code-filled.svg";
+export { default as fileGeneric } from "../images/icons/file-generic.svg";
+export { default as fileGenericFilled } from "../images/icons/file-generic-filled.svg";
+export { default as fileImage } from "../images/icons/file-image.svg";
+export { default as fileImageFilled } from "../images/icons/file-image-filled.svg";
+export { default as filePDF } from "../images/icons/file-pdf.svg";
+export { default as filePDFFilled } from "../images/icons/file-pdf-filled.svg";
+export { default as filter } from "../images/icons/filter.svg";
+export { default as flag } from "../images/icons/flag.svg";
+export { default as flagFilled } from "../images/icons/flag-filled.svg";
+export { default as folder } from "../images/icons/folder.svg";
+export { default as folderFilled } from "../images/icons/folder-filled.svg";
+export { default as folderOpen } from "../images/icons/folder-open.svg";
+export { default as folderOpenFilled } from "../images/icons/folder-open-filled.svg";
+export { default as globe } from "../images/icons/globe.svg";
+export { default as globeAlt } from "../images/icons/globe-alt.svg";
+export { default as groups } from "../images/icons/groups.svg";
+export { default as groupsFilled } from "../images/icons/groups-filled.svg";
+export { default as help } from "../images/icons/help.svg";
+export { default as hide } from "../images/icons/hide.svg";
+export { default as hideFilled } from "../images/icons/hide-filled.svg";
+export { default as highlight } from "../images/icons/highlight.svg";
+export { default as image } from "../images/icons/image.svg";
+export { default as imageFilled } from "../images/icons/image-filled.svg";
+export { default as leave } from "../images/icons/leave.svg";
+export { default as leaveFilled } from "../images/icons/leave-filled.svg";
+export { default as link } from "../images/icons/link.svg";
+export { default as listOrdered } from "../images/icons/list-ordered.svg";
+export { default as listUnordered } from "../images/icons/list-unordered.svg";
+export { default as list } from "../images/icons/list.svg";
+export { default as lock } from "../images/icons/lock.svg";
+export { default as lockFilled } from "../images/icons/lock-filled.svg";
+export { default as logout } from "../images/icons/logout.svg";
+export { default as logo } from "../images/icons/logo.svg";
+export { default as note } from "../images/icons/note.svg";
+export { default as noteFilled } from "../images/icons/note-filled.svg";
+export { default as plus } from "../images/icons/plus.svg";
+export { default as preview } from "../images/icons/preview.svg";
+export { default as previewFilled } from "../images/icons/preview-filled.svg";
+export { default as profile } from "../images/icons/profile.svg";
+export { default as profileFilled } from "../images/icons/profile-filled.svg";
+export { default as refresh } from "../images/icons/refresh.svg";
+export { default as reply } from "../images/icons/reply.svg";
+export { default as restricted } from "../images/icons/restricted.svg";
+export { default as search } from "../images/icons/search.svg";
+export { default as settings } from "../images/icons/settings.svg";
+export { default as share } from "../images/icons/share.svg";
+export { default as show } from "../images/icons/show.svg";
+export { default as showFilled } from "../images/icons/show-filled.svg";
+export { default as socialFacebook } from "../images/icons/social-facebook.svg";
+export { default as socialTwitter } from "../images/icons/social-twitter.svg";
+export { default as sort } from "../images/icons/sort.svg";
+export { default as tag } from "../images/icons/tag.svg";
+export { default as tagFilled } from "../images/icons/tag-filled.svg";
+export { default as tagAltFilled } from "../images/icons/tag-alt-filled.svg";
+export { default as theme } from "../images/icons/theme.svg";
+export { default as trash } from "../images/icons/trash.svg";
+export { default as trashFilled } from "../images/icons/trash-filled.svg";

lib/icons.js

@@ -1,2 +0,1 @@
-// @ts-nocheck
 export { default as annotate } from '../images/icons/annotate.svg';
@@ -3,0 +2,0 @@ export { default as annotateAlt } from '../images/icons/annotate-alt.svg';

lib/index.d.ts

@@ -5,3 +5,2 @@ export { Dialog } from "./components/Dialog";
 export { Panel } from "./components/Panel";
-export { Spinner } from "./components/Spinner";
 export { Table } from "./components/Table";
@@ -15,3 +14,4 @@ export { Thumbnail } from "./components/Thumbnail";
 export { Modal, ConfirmModal } from "./components/Modal";
+export { FullScreenSpinner, Spinner } from "./components/Spinner";
 export { SvgIcon, registerIcon, registerIcons } from "./components/SvgIcon";
 export { TextInput, TextInputWithButton } from "./components/TextInput";

lib/index.js

@@ -10,3 +10,3 @@ // Components
 export { Panel } from './components/Panel';
-export { Spinner } from './components/Spinner';
+export { FullScreenSpinner, Spinner } from './components/Spinner';
 export { SvgIcon, registerIcon, registerIcons } from './components/SvgIcon';
@@ -13,0 +13,0 @@ export { Table } from './components/Table';

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

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js";
-import { Spinner } from '../../..';
+import { useRef, useState } from 'preact/hooks';
+import { FullScreenSpinner, LabeledButton, Spinner } from '../../..';
+import { useElementShouldClose } from '../../../hooks/use-element-should-close';
 import Library from '../Library';
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 export default function SpinnerComponents() {
+  const [fullScreenSpinnerVisible, setFullScreenSpinnerVisible] = useState(false);
+  const fullScreenSpinnerContainerRef = useRef(
+  /** @type {HTMLDivElement | null} */
+  null);
+  useElementShouldClose(fullScreenSpinnerContainerRef, true
+  /* isOpen */
+  , () => {
+    setFullScreenSpinnerVisible(false);
+  });
   return _jsxDEV(Library.Page, {
@@ -13,3 +24,3 @@ title: "Spinner",
         fileName: _jsxFileName,
-        lineNumber: 8,
+        lineNumber: 26,
         columnNumber: 13
@@ -20,3 +31,3 @@ }, this), " component is based on the ", _jsxDEV("code", {
         fileName: _jsxFileName,
-        lineNumber: 8,
+        lineNumber: 26,
         columnNumber: 60
@@ -26,3 +37,3 @@ }, this), ' ', "pattern and renders an animated SVG."]
       fileName: _jsxFileName,
-      lineNumber: 7,
+      lineNumber: 25,
       columnNumber: 7
@@ -37,3 +48,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 14,
+            lineNumber: 32,
             columnNumber: 13
@@ -43,3 +54,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 13,
+          lineNumber: 31,
           columnNumber: 11
@@ -49,3 +60,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 12,
+        lineNumber: 30,
         columnNumber: 9
@@ -60,3 +71,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 19,
+            lineNumber: 37,
             columnNumber: 13
@@ -66,3 +77,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 18,
+          lineNumber: 36,
           columnNumber: 11
@@ -72,3 +83,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 35,
         columnNumber: 9
@@ -83,3 +94,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 24,
+            lineNumber: 42,
             columnNumber: 13
@@ -89,3 +100,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 23,
+          lineNumber: 41,
           columnNumber: 11
@@ -95,3 +106,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 22,
+        lineNumber: 40,
         columnNumber: 9
@@ -101,8 +112,57 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 29,
       columnNumber: 7
+    }, this), _jsxDEV(Library.Pattern, {
+      title: "Full-Screen Spinner",
+      children: _jsxDEV(Library.Example, {
+        children: [_jsxDEV("p", {
+          children: ["A component that renders a full-screen spinner over an overlay. Press ", _jsxDEV("code", {
+            children: "ESC"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 51,
+            columnNumber: 19
+          }, this), " to hide the spinner."]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 49,
+          columnNumber: 11
+        }, this), _jsxDEV(Library.Demo, {
+          children: [_jsxDEV(LabeledButton, {
+            onClick: () => setFullScreenSpinnerVisible(true),
+            children: "Show Full-Screen Spinner"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 54,
+            columnNumber: 13
+          }, this), fullScreenSpinnerVisible && _jsxDEV("div", {
+            ref: fullScreenSpinnerContainerRef,
+            children: _jsxDEV(FullScreenSpinner, {}, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 59,
+              columnNumber: 17
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 58,
+            columnNumber: 15
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 53,
+          columnNumber: 11
+        }, this)]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 48,
+        columnNumber: 9
+      }, this)
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 7
     }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 6,
+    lineNumber: 24,
     columnNumber: 5
@@ -109,0 +169,0 @@ }, this);

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

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js";
-import { SvgIcon } from '../../..';
+import { useRef, useState } from 'preact/hooks';
+import { Icon, LabeledButton } from '../../..';
+import { useElementShouldClose } from '../../../hooks/use-element-should-close';
 import Library from '../Library';
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 export default function SpinnerPatterns() {
+  const [fullScreenSpinnerVisible, setFullScreenSpinnerVisible] = useState(false);
+  const fullScreenSpinnerContainerRef = useRef(
+  /** @type {HTMLDivElement | null} */
+  null);
+  useElementShouldClose(fullScreenSpinnerContainerRef, true
+  /* isOpen */
+  , () => {
+    setFullScreenSpinnerVisible(false);
+  });
   return _jsxDEV(Library.Page, {
@@ -13,3 +24,3 @@ title: "Spinners",
         fileName: _jsxFileName,
-        lineNumber: 8,
+        lineNumber: 27,
         columnNumber: 13
@@ -19,3 +30,3 @@ }, this), " pattern can be used to show loading states. It is an animated SVG."]
       fileName: _jsxFileName,
-      lineNumber: 7,
+      lineNumber: 26,
       columnNumber: 7
@@ -29,3 +40,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 13,
+          lineNumber: 32,
           columnNumber: 26
@@ -36,3 +47,3 @@ }, this), "; it renders at ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 13,
+          lineNumber: 32,
           columnNumber: 63
@@ -42,3 +53,3 @@ }, this), ' ', "square, by default. Other relative sizes are available as shown. For manual sizing control, adjust the font-size of a parent element. Spinners have a default foreground color, which may be overridden with utility classes."]
         fileName: _jsxFileName,
-        lineNumber: 12,
+        lineNumber: 31,
         columnNumber: 9
@@ -52,3 +63,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 21,
+            lineNumber: 40,
             columnNumber: 49
@@ -58,12 +69,12 @@ }, this), " square."]
           fileName: _jsxFileName,
-          lineNumber: 20,
+          lineNumber: 39,
           columnNumber: 11
         }, this), _jsxDEV(Library.Demo, {
           withSource: true,
-          children: _jsxDEV(SvgIcon, {
+          children: _jsxDEV(Icon, {
             name: "hyp-spinner",
-            className: "hyp-spinner"
+            containerClasses: "hyp-spinner"
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 24,
+            lineNumber: 43,
             columnNumber: 13
@@ -73,3 +84,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 23,
+          lineNumber: 42,
           columnNumber: 11
@@ -79,3 +90,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 19,
+        lineNumber: 38,
         columnNumber: 9
@@ -89,3 +100,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 29,
+            lineNumber: 48,
             columnNumber: 32
@@ -95,12 +106,12 @@ }, this), " square and can be used inline."]
           fileName: _jsxFileName,
-          lineNumber: 28,
+          lineNumber: 47,
           columnNumber: 11
         }, this), _jsxDEV(Library.Demo, {
           withSource: true,
-          children: _jsxDEV(SvgIcon, {
+          children: _jsxDEV(Icon, {
             name: "hyp-spinner",
-            className: "hyp-spinner--small"
+            containerClasses: "hyp-spinner--small"
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 32,
+            lineNumber: 51,
             columnNumber: 13
@@ -110,3 +121,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 31,
+          lineNumber: 50,
           columnNumber: 11
@@ -116,3 +127,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 27,
+        lineNumber: 46,
         columnNumber: 9
@@ -126,3 +137,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 37,
+            lineNumber: 56,
             columnNumber: 32
@@ -132,12 +143,12 @@ }, this), " square."]
           fileName: _jsxFileName,
-          lineNumber: 36,
+          lineNumber: 55,
           columnNumber: 11
         }, this), _jsxDEV(Library.Demo, {
           withSource: true,
-          children: _jsxDEV(SvgIcon, {
+          children: _jsxDEV(Icon, {
             name: "hyp-spinner",
-            className: "hyp-spinner--large"
+            containerClasses: "hyp-spinner--large"
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 40,
+            lineNumber: 59,
             columnNumber: 13
@@ -147,3 +158,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 39,
+          lineNumber: 58,
           columnNumber: 11
@@ -153,3 +164,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 54,
         columnNumber: 9
@@ -162,12 +173,12 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 45,
+          lineNumber: 64,
           columnNumber: 11
         }, this), _jsxDEV(Library.Demo, {
           withSource: true,
-          children: _jsxDEV(SvgIcon, {
+          children: _jsxDEV(Icon, {
             name: "hyp-spinner",
-            className: "hyp-spinner hyp-u-color--brand"
+            containerClasses: "hyp-spinner hyp-u-color--brand"
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 49,
+            lineNumber: 68,
             columnNumber: 13
@@ -177,3 +188,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 48,
+          lineNumber: 67,
           columnNumber: 11
@@ -183,3 +194,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 44,
+        lineNumber: 63,
         columnNumber: 9
@@ -189,8 +200,61 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 30,
       columnNumber: 7
+    }, this), _jsxDEV(Library.Pattern, {
+      title: "Full Screen Spinner",
+      children: _jsxDEV(Library.Example, {
+        children: [_jsxDEV("p", {
+          children: ["The full-screen spinner pattern centers a large spinner in a light overlay. Press ", _jsxDEV("code", {
+            children: "ESC"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 80,
+            columnNumber: 28
+          }, this), " to hide the spinner."]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 78,
+          columnNumber: 11
+        }, this), _jsxDEV(Library.Demo, {
+          children: [_jsxDEV(LabeledButton, {
+            onClick: () => setFullScreenSpinnerVisible(true),
+            children: "Show Full-Screen Spinner"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 83,
+            columnNumber: 13
+          }, this), fullScreenSpinnerVisible && _jsxDEV("div", {
+            className: "hyp-full-screen-spinner",
+            ref: fullScreenSpinnerContainerRef,
+            children: _jsxDEV(Icon, {
+              name: "hyp-spinner",
+              containerClasses: "hyp-spinner--large hyp-full-screen-spinner__spinner"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 91,
+              columnNumber: 17
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 87,
+            columnNumber: 15
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 82,
+          columnNumber: 11
+        }, this)]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 77,
+        columnNumber: 9
+      }, this)
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 76,
+      columnNumber: 7
     }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 6,
+    lineNumber: 25,
     columnNumber: 5
@@ -197,0 +261,0 @@ }, this);

lib/pattern-library/icons.d.ts

 declare var _default: {
-    'arrow-left': any;
-    'arrow-right': any;
-    cancel: any;
-    check: any;
-    checkbox: any;
-    edit: any;
-    logo: any;
-    profile: any;
-    'hyp-spinner': any;
-    trash: any;
+    'arrow-left': string;
+    'arrow-right': string;
+    cancel: string;
+    check: string;
+    checkbox: string;
+    edit: string;
+    logo: string;
+    profile: string;
+    'hyp-spinner': string;
+    trash: string;
 };
 export default _default;

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -65,4 +65,4 @@ "license": "BSD-2-Clause",
     "lint": "eslint .",
-    "checkformatting": "prettier --check '**/*.{js,scss,md}'",
-    "format": "prettier --list-different --write '**/*.{js,scss,md}'",
+    "checkformatting": "prettier --check '**/*.{md,js,scss,ts}'",
+    "format": "prettier --list-different --write '**/*.{md,js,scss,ts}'",
     "test": "gulp test",
@@ -69,0 +69,0 @@ "push": "yarn build && yalc push",

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

889991

increased by2.28%

Number of package files

289

increased by0.35%

Lines of code

10999

increased by2.48%

No dependency changes