@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

CHANGELOG.md

@@ -8,2 +8,15 @@ # Changelog
 
+## [v3.10.0] - 2021-09-15
+
+Adds `emptyItemsMessage` to `Table`, reduces CSS specificity of `table` pattern
+and fixes web root for the local pattern library.
+
+### Added
+
+- Add `emptyItemsMessage`, reduce CSS specificity for `Table` (`table` pattern) [#193](https://github.com/hypothesis/frontend-shared/pull/193)
+
+### Changed
+
+- Serve pattern library at web root [#192](https://github.com/hypothesis/frontend-shared/pull/192)
+
 ## [v3.9.0] - 2021-09-09
@@ -10,0 +23,0 @@

lib/components/Table.d.ts

@@ -7,3 +7,3 @@ /**
  */
-export function Table<Item>({ accessibleLabel, classes, containerClasses, isLoading, items, onSelectItem, onUseItem, renderItem, selectedItem, tableHeaders, }: TableProps<Item>): import("preact").JSX.Element;
+export function Table<Item>({ accessibleLabel, classes, containerClasses, emptyItemsMessage, isLoading, items, onSelectItem, onUseItem, renderItem, selectedItem, tableHeaders, }: TableProps<Item>): import("preact").JSX.Element;
 export type TableHeader = {
@@ -31,2 +31,7 @@ label: string;
     /**
+     * - Optional message to display if
+     * there are no `items`. Will only display when the Table is not loading.
+     */
+    emptyItemsMessage?: import("preact").ComponentChildren;
+    /**
      * - The columns to display in this table
@@ -33,0 +38,0 @@ */

lib/components/Table.js

@@ -37,2 +37,4 @@ "use strict";
  *   element, which is a <Scrollbox> div
+ * @prop {import("preact").ComponentChildren} [emptyItemsMessage] - Optional message to display if
+ *   there are no `items`. Will only display when the Table is not loading.
  * @prop {TableHeader[]} tableHeaders - The columns to display in this table
@@ -94,2 +96,3 @@ * @prop {boolean} [isLoading] - Show an indicator that data for the table is
   containerClasses,
+  emptyItemsMessage,
   isLoading = false,
@@ -212,3 +215,3 @@ items,
           }, index) => (0, _jsxDevRuntime.jsxDEV)("th", {
-            className: (0, _classnames.default)(classes),
+            className: (0, _classnames.default)('Hyp-Table__header', classes),
             scope: "col",
@@ -218,3 +221,3 @@ children: label
             fileName: _jsxFileName,
-            lineNumber: 177,
+            lineNumber: 180,
             columnNumber: 15
@@ -224,3 +227,3 @@ }, this))
           fileName: _jsxFileName,
-          lineNumber: 175,
+          lineNumber: 178,
           columnNumber: 11
@@ -230,3 +233,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 174,
+        lineNumber: 177,
         columnNumber: 9
@@ -247,3 +250,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("tbody", {
           fileName: _jsxFileName,
-          lineNumber: 190,
+          lineNumber: 193,
           columnNumber: 15
@@ -253,3 +256,3 @@ }, this))
         fileName: _jsxFileName,
-        lineNumber: 187,
+        lineNumber: 190,
         columnNumber: 9
@@ -259,3 +262,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 170,
       columnNumber: 7
@@ -268,3 +271,3 @@ }, this), isLoading && (0, _jsxDevRuntime.jsxDEV)("div", {
         fileName: _jsxFileName,
-        lineNumber: 209,
+        lineNumber: 212,
         columnNumber: 11
@@ -274,8 +277,16 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 208,
+      lineNumber: 211,
       columnNumber: 9
+    }, this), !isLoading && items.length === 0 && emptyItemsMessage && (0, _jsxDevRuntime.jsxDEV)("div", {
+      className: "Hyp-Table-Scrollbox__message",
+      "data-testid": "empty-items-message",
+      children: emptyItemsMessage
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 216,
+      columnNumber: 9
     }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 162,
+    lineNumber: 165,
     columnNumber: 5
@@ -282,0 +293,0 @@ }, this);

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

@@ -38,2 +38,19 @@ "use strict";
 
+const customizedRenderCallback = file => (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {
+  children: [(0, _jsxDevRuntime.jsxDEV)("td", {
+    className: "hyp-u-color--grey-6",
+    children: file.displayName
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 18,
+    columnNumber: 5
+  }, void 0), (0, _jsxDevRuntime.jsxDEV)("td", {
+    children: file.updated
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 19,
+    columnNumber: 5
+  }, void 0)]
+}, void 0, true);
+
 const {
@@ -57,3 +74,3 @@ tableHeaders,
         fileName: _jsxFileName,
-        lineNumber: 27,
+        lineNumber: 34,
         columnNumber: 11
@@ -63,3 +80,3 @@ }, this), " will fill available space if none of its ancestors apply any constraints on height or width. It will fill 100% of its available space horizontally, and take up all the vertical space it needs. In this case, it will change vertical size during loading."]
       fileName: _jsxFileName,
-      lineNumber: 26,
+      lineNumber: 33,
       columnNumber: 7
@@ -74,3 +91,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Demo, {
           fileName: _jsxFileName,
-          lineNumber: 34,
+          lineNumber: 41,
           columnNumber: 11
@@ -80,3 +97,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 33,
+        lineNumber: 40,
         columnNumber: 9
@@ -94,3 +111,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.Table, {
         fileName: _jsxFileName,
-        lineNumber: 38,
+        lineNumber: 45,
         columnNumber: 9
@@ -100,3 +117,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 32,
+      lineNumber: 39,
       columnNumber: 7
@@ -106,3 +123,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 25,
+    lineNumber: 32,
     columnNumber: 5
@@ -125,3 +142,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 62,
+        lineNumber: 69,
         columnNumber: 9
@@ -132,3 +149,3 @@ }, this), " render inside of a ", (0, _jsxDevRuntime.jsxDEV)("code", {
         fileName: _jsxFileName,
-        lineNumber: 62,
+        lineNumber: 69,
         columnNumber: 48
@@ -138,9 +155,15 @@ }, this), " container component, which gives the table a scroll context and allows it to scroll if it overflows. Apply height/width constraints to an appropriate parent elements to enable this. Height will not change when loading."]
       fileName: _jsxFileName,
-      lineNumber: 61,
+      lineNumber: 68,
       columnNumber: 7
     }, this), (0, _jsxDevRuntime.jsxDEV)("p", {
-      children: "In this example, the last item in the table is pre-selected."
-    }, void 0, false, {
+      children: ["In this example, the last item in the table is pre-selected. Also in this example: an additional style is added to the first ", (0, _jsxDevRuntime.jsxDEV)("code", {
+        children: "td"
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 76,
+        columnNumber: 65
+      }, this), ' ', "in each row to make its foreground color different (NB: the example here would not meet ARIA contrast requirements). This demonstrates style extension/override."]
+    }, void 0, true, {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 74,
       columnNumber: 7
@@ -156,3 +179,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Demo, {
           fileName: _jsxFileName,
-          lineNumber: 70,
+          lineNumber: 83,
           columnNumber: 11
@@ -162,3 +185,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 69,
+        lineNumber: 82,
         columnNumber: 9
@@ -175,7 +198,7 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
           onUseItem: file => alert(`Selected ${file.displayName}`),
-          renderItem: file => renderCallback(file),
+          renderItem: file => customizedRenderCallback(file),
           tableHeaders: tableHeaders
         }, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 78,
+          lineNumber: 91,
           columnNumber: 11
@@ -185,3 +208,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 74,
+        lineNumber: 87,
         columnNumber: 9
@@ -191,3 +214,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 68,
+      lineNumber: 81,
       columnNumber: 7
@@ -197,3 +220,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 60,
+    lineNumber: 67,
     columnNumber: 5
@@ -203,2 +226,80 @@ }, this);
 
+function EmptyTableExample() {
+  const [isLoading, setIsLoading] = (0, _hooks.useState)(false);
+  const items = [];
+  const [selectedFile, setSelectedFile] = (0, _hooks.useState)(
+  /** @type {null|object} */
+  items[items.length - 1]);
+  const emptyItemsMessage = (0, _jsxDevRuntime.jsxDEV)("p", {
+    children: ["There are no files available to show.", ' ', (0, _jsxDevRuntime.jsxDEV)("a", {
+      href: "https://www.example.com",
+      children: "Learn more."
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 117,
+      columnNumber: 7
+    }, this)]
+  }, void 0, true, {
+    fileName: _jsxFileName,
+    lineNumber: 115,
+    columnNumber: 5
+  }, this);
+  return (0, _jsxDevRuntime.jsxDEV)(_Library.default.Example, {
+    title: "Constrained Table",
+    variant: "wide",
+    children: [(0, _jsxDevRuntime.jsxDEV)("p", {
+      children: ["This Table has no items (it is empty). When not in loading state, the provided ", (0, _jsxDevRuntime.jsxDEV)("code", {
+        children: "emptyItemsMessage"
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 125,
+        columnNumber: 18
+      }, this), " will render centered in the table."]
+    }, void 0, true, {
+      fileName: _jsxFileName,
+      lineNumber: 123,
+      columnNumber: 7
+    }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Demo, {
+      withSource: true,
+      children: [(0, _jsxDevRuntime.jsxDEV)("div", {
+        className: "hyp-u-padding--5",
+        children: (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+          onClick: () => setIsLoading(!isLoading),
+          children: "Toggle Loading"
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 130,
+          columnNumber: 11
+        }, this)
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 129,
+        columnNumber: 9
+      }, this), (0, _jsxDevRuntime.jsxDEV)(_.Table, {
+        accessibleLabel: "File list",
+        emptyItemsMessage: emptyItemsMessage,
+        isLoading: isLoading,
+        items: items,
+        selectedItem: selectedFile,
+        onSelectItem: file => setSelectedFile(file),
+        onUseItem: file => alert(`Selected ${file.displayName}`),
+        renderItem: file => renderCallback(file),
+        tableHeaders: tableHeaders
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 135,
+        columnNumber: 9
+      }, this)]
+    }, void 0, true, {
+      fileName: _jsxFileName,
+      lineNumber: 128,
+      columnNumber: 7
+    }, this)]
+  }, void 0, true, {
+    fileName: _jsxFileName,
+    lineNumber: 122,
+    columnNumber: 5
+  }, this);
+}
+
 function TableComponents() {
@@ -211,12 +312,16 @@ return (0, _jsxDevRuntime.jsxDEV)(_Library.default.Page, {
         fileName: _jsxFileName,
-        lineNumber: 98,
+        lineNumber: 155,
         columnNumber: 9
       }, this), (0, _jsxDevRuntime.jsxDEV)(ScrollboxTableExample, {}, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 99,
+        lineNumber: 156,
         columnNumber: 9
+      }, this), (0, _jsxDevRuntime.jsxDEV)(EmptyTableExample, {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 157,
+        columnNumber: 9
       }, this)]
     }, void 0, true, {
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 154,
       columnNumber: 7
@@ -226,3 +331,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 96,
+    lineNumber: 153,
     columnNumber: 5
@@ -229,0 +334,0 @@ }, this);

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

@@ -70,2 +70,3 @@ "use strict";
                   scope: "col",
+                  className: "hyp-table__header",
                   children: "Column A"
@@ -78,6 +79,7 @@ }, void 0, false, {
                   scope: "col",
+                  className: "hyp-table__header",
                   children: "Column B"
                 }, void 0, false, {
                   fileName: _jsxFileName,
-                  lineNumber: 28,
+                  lineNumber: 30,
                   columnNumber: 19
@@ -96,3 +98,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 31,
+              lineNumber: 35,
               columnNumber: 15
@@ -121,3 +123,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 38,
+            lineNumber: 42,
             columnNumber: 60
@@ -127,3 +129,3 @@ }, this), ' ', "elements. In this example, the column widths are set to 30% and 70%."]
           fileName: _jsxFileName,
-          lineNumber: 37,
+          lineNumber: 41,
           columnNumber: 11
@@ -138,2 +140,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Demo, {
                   scope: "col",
+                  className: "hyp-table__header",
                   style: "width:30%",
@@ -143,6 +146,7 @@ children: "Column A"
                   fileName: _jsxFileName,
-                  lineNumber: 45,
+                  lineNumber: 49,
                   columnNumber: 19
                 }, this), (0, _jsxDevRuntime.jsxDEV)("th", {
                   scope: "col",
+                  className: "hyp-table__header",
                   style: "width:70%",
@@ -152,3 +156,3 @@ children: "Column B"
                   fileName: _jsxFileName,
-                  lineNumber: 48,
+                  lineNumber: 56,
                   columnNumber: 19
@@ -158,3 +162,3 @@ }, this)]
                 fileName: _jsxFileName,
-                lineNumber: 44,
+                lineNumber: 48,
                 columnNumber: 17
@@ -164,7 +168,7 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 43,
+              lineNumber: 47,
               columnNumber: 15
             }, this), (0, _jsxDevRuntime.jsxDEV)(_samples.SampleTableBody, {}, void 0, false, {
               fileName: _jsxFileName,
-              lineNumber: 53,
+              lineNumber: 65,
               columnNumber: 15
@@ -174,3 +178,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 42,
+            lineNumber: 46,
             columnNumber: 13
@@ -180,3 +184,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 41,
+          lineNumber: 45,
           columnNumber: 11
@@ -186,3 +190,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 36,
+        lineNumber: 40,
         columnNumber: 9
@@ -196,3 +200,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Example, {
             fileName: _jsxFileName,
-            lineNumber: 60,
+            lineNumber: 72,
             columnNumber: 34
@@ -203,3 +207,3 @@ }, this), " is constrained within a", ' ', (0, _jsxDevRuntime.jsxDEV)("code", {
             fileName: _jsxFileName,
-            lineNumber: 61,
+            lineNumber: 73,
             columnNumber: 13
@@ -210,3 +214,3 @@ }, this), " with a ", (0, _jsxDevRuntime.jsxDEV)("code", {
             fileName: _jsxFileName,
-            lineNumber: 61,
+            lineNumber: 73,
             columnNumber: 43
@@ -216,3 +220,3 @@ }, this), "."]
           fileName: _jsxFileName,
-          lineNumber: 59,
+          lineNumber: 71,
           columnNumber: 11
@@ -230,13 +234,15 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_Library.default.Demo, {
                     scope: "col",
+                    className: "hyp-table__header",
                     children: "Column A"
                   }, void 0, false, {
                     fileName: _jsxFileName,
-                    lineNumber: 71,
+                    lineNumber: 83,
                     columnNumber: 21
                   }, this), (0, _jsxDevRuntime.jsxDEV)("th", {
                     scope: "col",
+                    className: "hyp-table__header",
                     children: "Column B"
                   }, void 0, false, {
                     fileName: _jsxFileName,
-                    lineNumber: 72,
+                    lineNumber: 86,
                     columnNumber: 21
@@ -246,3 +252,3 @@ }, this)]
                   fileName: _jsxFileName,
-                  lineNumber: 70,
+                  lineNumber: 82,
                   columnNumber: 19
@@ -252,7 +258,7 @@ }, this)
                 fileName: _jsxFileName,
-                lineNumber: 69,
+                lineNumber: 81,
                 columnNumber: 17
               }, this), (0, _jsxDevRuntime.jsxDEV)(_samples.SampleTableBody, {}, void 0, false, {
                 fileName: _jsxFileName,
-                lineNumber: 75,
+                lineNumber: 91,
                 columnNumber: 17
@@ -262,3 +268,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 68,
+              lineNumber: 80,
               columnNumber: 15
@@ -268,3 +274,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 64,
+            lineNumber: 76,
             columnNumber: 13
@@ -274,3 +280,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 63,
+          lineNumber: 75,
           columnNumber: 11
@@ -280,3 +286,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 58,
+        lineNumber: 70,
         columnNumber: 9
@@ -283,0 +289,0 @@ }, this)]

lib/pattern-library/index.d.ts

@@ -19,3 +19,3 @@ /**
  */
-export function startApp({ baseURL, extraRoutes, icons, }?: PatternLibraryAppOptions): void;
+export function startApp({ baseURL, extraRoutes, icons }?: PatternLibraryAppOptions): void;
 export type PlaygroundRoute = {
@@ -22,0 +22,0 @@ /**

lib/pattern-library/index.js

@@ -49,3 +49,3 @@ "use strict";
 function startApp({
-  baseURL = '/ui-playground',
+  baseURL = '',
   extraRoutes = [],
@@ -63,3 +63,3 @@ icons = {}
     fileName: _jsxFileName,
-    lineNumber: 38,
+    lineNumber: 34,
     columnNumber: 5
@@ -66,0 +66,0 @@ }, this),

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "3.9.0",
+  "version": "3.10.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

754438

increased by1.36%

Lines of code

10429

increased by1.21%

No dependency changes