@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [v3.2.0] - 2021-06-15
+
+Adds theming support.
+
+- Add basic clean-theme support and update `card`, `frame` patterns [#89](https://github.com/hypothesis/frontend-shared/pull/89)
+
 ## [v3.1.1] - 2021-06-11
@@ -10,0 +16,0 @@

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

@@ -86,2 +86,23 @@ "use strict";
           columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "content in a frame: clean theme",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "theme-clean",
+            children: (0, _jsxDevRuntime.jsxDEV)("div", {
+              className: "hyp-frame",
+              children: "Content within a frame in the clean theme. The frame itself has no borders when in the clean theme."
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 34,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 33,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 32,
+          columnNumber: 11
         }, this)]
@@ -104,3 +125,3 @@ }, void 0, true, {
           fileName: _jsxFileName,
-          lineNumber: 37,
+          lineNumber: 45,
           columnNumber: 13
@@ -110,3 +131,3 @@ }, this), " is a frame with a shadow and hover-shadow effect that fills available horizontal space."]
         fileName: _jsxFileName,
-        lineNumber: 36,
+        lineNumber: 44,
         columnNumber: 9
@@ -121,3 +142,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
             fileName: _jsxFileName,
-            lineNumber: 42,
+            lineNumber: 50,
             columnNumber: 13
@@ -127,3 +148,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 41,
+          lineNumber: 49,
           columnNumber: 11
@@ -137,3 +158,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
             fileName: _jsxFileName,
-            lineNumber: 45,
+            lineNumber: 53,
             columnNumber: 13
@@ -143,3 +164,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 44,
+          lineNumber: 52,
           columnNumber: 11
@@ -154,3 +175,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
               fileName: _jsxFileName,
-              lineNumber: 51,
+              lineNumber: 59,
               columnNumber: 15
@@ -164,3 +185,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
                 fileName: _jsxFileName,
-                lineNumber: 56,
+                lineNumber: 64,
                 columnNumber: 17
@@ -172,3 +193,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
                 fileName: _jsxFileName,
-                lineNumber: 57,
+                lineNumber: 65,
                 columnNumber: 17
@@ -180,3 +201,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
                 fileName: _jsxFileName,
-                lineNumber: 58,
+                lineNumber: 66,
                 columnNumber: 17
@@ -186,3 +207,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 55,
+              lineNumber: 63,
               columnNumber: 15
@@ -192,3 +213,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 50,
+            lineNumber: 58,
             columnNumber: 13
@@ -198,8 +219,63 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 49,
+          lineNumber: 57,
           columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "Clean theme",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "theme-clean",
+            children: (0, _jsxDevRuntime.jsxDEV)("div", {
+              className: "hyp-card",
+              children: [(0, _jsxDevRuntime.jsxDEV)("div", {
+                children: "This is some text in a card in the clean theme. There are no borders or box-shadows."
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 73,
+                columnNumber: 17
+              }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
+                className: "hyp-actions",
+                children: [(0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
+                  title: "User",
+                  icon: "profile"
+                }, void 0, false, {
+                  fileName: _jsxFileName,
+                  lineNumber: 78,
+                  columnNumber: 19
+                }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
+                  title: "Edit",
+                  icon: "edit"
+                }, void 0, false, {
+                  fileName: _jsxFileName,
+                  lineNumber: 79,
+                  columnNumber: 19
+                }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
+                  title: "Delete",
+                  icon: "trash"
+                }, void 0, false, {
+                  fileName: _jsxFileName,
+                  lineNumber: 80,
+                  columnNumber: 19
+                }, this)]
+              }, void 0, true, {
+                fileName: _jsxFileName,
+                lineNumber: 77,
+                columnNumber: 17
+              }, this)]
+            }, void 0, true, {
+              fileName: _jsxFileName,
+              lineNumber: 72,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 71,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 70,
+          columnNumber: 11
         }, this)]
       }, void 0, true, {
         fileName: _jsxFileName,
-        lineNumber: 40,
+        lineNumber: 48,
         columnNumber: 9
@@ -209,3 +285,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 43,
       columnNumber: 7
@@ -219,3 +295,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 67,
+          lineNumber: 90,
           columnNumber: 15
@@ -225,3 +301,3 @@ }, this), " pattern presents a collection of actions (typically buttons). By default, these are laid out in a row, aligned right, but can also be laid out in a column."]
         fileName: _jsxFileName,
-        lineNumber: 66,
+        lineNumber: 89,
         columnNumber: 9
@@ -238,3 +314,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
               fileName: _jsxFileName,
-              lineNumber: 74,
+              lineNumber: 97,
               columnNumber: 15
@@ -246,3 +322,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 75,
+              lineNumber: 98,
               columnNumber: 15
@@ -254,3 +330,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 76,
+              lineNumber: 99,
               columnNumber: 15
@@ -260,3 +336,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 73,
+            lineNumber: 96,
             columnNumber: 13
@@ -266,3 +342,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 72,
+          lineNumber: 95,
           columnNumber: 11
@@ -278,3 +354,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
               fileName: _jsxFileName,
-              lineNumber: 81,
+              lineNumber: 104,
               columnNumber: 15
@@ -286,3 +362,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               fileName: _jsxFileName,
-              lineNumber: 82,
+              lineNumber: 105,
               columnNumber: 15
@@ -294,3 +370,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               fileName: _jsxFileName,
-              lineNumber: 83,
+              lineNumber: 106,
               columnNumber: 15
@@ -300,3 +376,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 80,
+            lineNumber: 103,
             columnNumber: 13
@@ -306,3 +382,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 79,
+          lineNumber: 102,
           columnNumber: 11
@@ -317,3 +393,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
               fileName: _jsxFileName,
-              lineNumber: 88,
+              lineNumber: 111,
               columnNumber: 15
@@ -324,3 +400,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 89,
+              lineNumber: 112,
               columnNumber: 15
@@ -331,3 +407,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 90,
+              lineNumber: 113,
               columnNumber: 15
@@ -337,3 +413,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 87,
+            lineNumber: 110,
             columnNumber: 13
@@ -343,3 +419,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 86,
+          lineNumber: 109,
           columnNumber: 11
@@ -357,3 +433,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
                 fileName: _jsxFileName,
-                lineNumber: 96,
+                lineNumber: 119,
                 columnNumber: 17
@@ -365,3 +441,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
                 fileName: _jsxFileName,
-                lineNumber: 97,
+                lineNumber: 120,
                 columnNumber: 17
@@ -373,3 +449,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
                 fileName: _jsxFileName,
-                lineNumber: 98,
+                lineNumber: 121,
                 columnNumber: 17
@@ -379,3 +455,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 95,
+              lineNumber: 118,
               columnNumber: 15
@@ -385,3 +461,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 94,
+            lineNumber: 117,
             columnNumber: 13
@@ -391,3 +467,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 93,
+          lineNumber: 116,
           columnNumber: 11
@@ -397,3 +473,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 71,
+        lineNumber: 94,
         columnNumber: 9
@@ -403,3 +479,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 88,
       columnNumber: 7
@@ -413,3 +489,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 107,
+          lineNumber: 130,
           columnNumber: 15
@@ -419,3 +495,3 @@ }, this), " pattern positions and sizes a modal container appropriately based on viewport size."]
         fileName: _jsxFileName,
-        lineNumber: 106,
+        lineNumber: 129,
         columnNumber: 9
@@ -432,3 +508,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
               fileName: _jsxFileName,
-              lineNumber: 113,
+              lineNumber: 136,
               columnNumber: 15
@@ -449,3 +525,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
                       fileName: _jsxFileName,
-                      lineNumber: 126,
+                      lineNumber: 149,
                       columnNumber: 23
@@ -455,3 +531,3 @@ }, this)
                     fileName: _jsxFileName,
-                    lineNumber: 125,
+                    lineNumber: 148,
                     columnNumber: 21
@@ -466,3 +542,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
                       fileName: _jsxFileName,
-                      lineNumber: 140,
+                      lineNumber: 163,
                       columnNumber: 23
@@ -472,3 +548,3 @@ }, this)
                     fileName: _jsxFileName,
-                    lineNumber: 139,
+                    lineNumber: 162,
                     columnNumber: 21
@@ -478,3 +554,3 @@ }, this)]
                   fileName: _jsxFileName,
-                  lineNumber: 124,
+                  lineNumber: 147,
                   columnNumber: 19
@@ -484,3 +560,3 @@ }, this)
                 fileName: _jsxFileName,
-                lineNumber: 123,
+                lineNumber: 146,
                 columnNumber: 17
@@ -490,3 +566,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 119,
+              lineNumber: 142,
               columnNumber: 15
@@ -496,3 +572,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 112,
+            lineNumber: 135,
             columnNumber: 13
@@ -502,3 +578,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 111,
+          lineNumber: 134,
           columnNumber: 11
@@ -508,3 +584,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 110,
+        lineNumber: 133,
         columnNumber: 9
@@ -514,3 +590,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 105,
+      lineNumber: 128,
       columnNumber: 7
@@ -517,0 +593,0 @@ }, this)]

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

@@ -73,2 +73,26 @@ "use strict";
           columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "A panel in the clean theme",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "theme-clean",
+            style: "width:100%",
+            children: (0, _jsxDevRuntime.jsxDEV)(_.Panel, {
+              icon: "edit",
+              title: "Panel with clean-theme styling",
+              onClose: () => alert('close clicked'),
+              children: "This panel has an optional icon in the header."
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 41,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 40,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 39,
+          columnNumber: 11
         }, this)]
@@ -75,0 +99,0 @@ }, void 0, true, {

package.json

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

445405

increased by1.89%

Number of package files

106

increased by0.95%

Lines of code

5920

increased by1.72%

No dependency changes