@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -8,2 +8,21 @@ # Changelog
 
+## [v2.1.0] - 2021-05-19
+
+### Added:
+
+- Establish basic color patterns [#70](https://github.com/hypothesis/frontend-shared/pull/70)
+- Add colors page to pattern library [#306d501](https://github.com/hypothesis/frontend-shared/commit/306d501f3e6025b3d6c5287f11be93a63b20afdf)
+- Add `colors` utility classes with foreground, background classes [#a756276](https://github.com/hypothesis/frontend-shared/commit/a75627676f9c1fcf4a8790d8d2a44cb5c199f6be)
+- Add columnar actions pattern (`.hyp-actions--column`) and examples [#ad72271](https://github.com/hypothesis/frontend-shared/commit/ad72271b8a73765dcf453a8a8c029b4f46be7d5f)
+
+### Changed:
+
+- Remove `justify-content` rule from buttons [#f232224](https://github.com/hypothesis/frontend-shared/commit/f232224fc272be09552827e62da0b4a464a8c53a)
+- Add clarification on availability of mixins [#69](https://github.com/hypothesis/frontend-shared/pull/69)
+- Refactor greyscale colors [#237ef0a](https://github.com/hypothesis/frontend-shared/commit/237ef0ae639fbcfd986b71a1df81bbe5650e5037)
+
+### Breaking changes:
+
+- Prefix all utility and pattern classes with `.hyp-` and update docs [#66](https://github.com/hypothesis/frontend-shared/pull/66)
+
 ## [v2.0.0] - 2021-05-13
@@ -10,0 +29,0 @@

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

@@ -37,3 +37,3 @@ "use strict";
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "frame",
+            className: "hyp-frame",
             children: "This is in a frame."
@@ -77,3 +77,3 @@ }, void 0, false, {
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "card",
+            className: "hyp-card",
             children: "This is in a card."
@@ -92,5 +92,5 @@ }, void 0, false, {
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "card",
+            className: "hyp-card",
             children: [(0, _jsxDevRuntime.jsxDEV)("div", {
-              className: "u-border",
+              className: "hyp-u-border",
               children: "Child content in a card."
@@ -102,3 +102,3 @@ }, void 0, false, {
             }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-              className: "u-border",
+              className: "hyp-u-border",
               children: "Child content in a card."
@@ -110,3 +110,3 @@ }, void 0, false, {
             }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-              className: "u-border",
+              className: "hyp-u-border",
               children: "Child content in a card."
@@ -130,3 +130,3 @@ }, void 0, false, {
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "card",
+            className: "hyp-card",
             children: [(0, _jsxDevRuntime.jsxDEV)("div", {
@@ -139,3 +139,3 @@ children: "This is some text in a card that also contains some available actions."
             }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-              className: "actions",
+              className: "hyp-actions",
               children: [(0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
@@ -196,3 +196,3 @@ title: "User",
           columnNumber: 15
-        }, this), " pattern presents a collection of actions (typically buttons) spaced out in a row, aligned right."]
+        }, 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."]
       }, void 0, true, {
@@ -206,3 +206,3 @@ fileName: _jsxFileName,
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "actions",
+            className: "hyp-actions",
             children: [(0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
@@ -213,3 +213,3 @@ icon: "profile",
               fileName: _jsxFileName,
-              lineNumber: 65,
+              lineNumber: 66,
               columnNumber: 15
@@ -221,3 +221,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 66,
+              lineNumber: 67,
               columnNumber: 15
@@ -229,3 +229,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
               fileName: _jsxFileName,
-              lineNumber: 67,
+              lineNumber: 68,
               columnNumber: 15
@@ -235,3 +235,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 64,
+            lineNumber: 65,
             columnNumber: 13
@@ -241,3 +241,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 63,
+          lineNumber: 64,
           columnNumber: 11
@@ -247,3 +247,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "actions",
+            className: "hyp-actions",
             children: [(0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
@@ -254,3 +254,3 @@ title: "User",
               fileName: _jsxFileName,
-              lineNumber: 72,
+              lineNumber: 73,
               columnNumber: 15
@@ -262,3 +262,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               fileName: _jsxFileName,
-              lineNumber: 73,
+              lineNumber: 74,
               columnNumber: 15
@@ -270,3 +270,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
               fileName: _jsxFileName,
-              lineNumber: 74,
+              lineNumber: 75,
               columnNumber: 15
@@ -276,3 +276,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 71,
+            lineNumber: 72,
             columnNumber: 13
@@ -282,8 +282,82 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 70,
+          lineNumber: 71,
           columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "Columnar layout",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "hyp-actions--column",
+            children: [(0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+              children: "User"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 80,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+              children: "Edit"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 81,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+              children: "Delete"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 82,
+              columnNumber: 15
+            }, this)]
+          }, void 0, true, {
+            fileName: _jsxFileName,
+            lineNumber: 79,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 78,
+          columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "Columnar layout: buttons stretching to fill space",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            style: "width:300px",
+            children: (0, _jsxDevRuntime.jsxDEV)("div", {
+              className: "hyp-actions--column",
+              children: [(0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+                variant: "primary",
+                children: "Do this"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 88,
+                columnNumber: 17
+              }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+                variant: "primary",
+                children: "No, this!"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 89,
+                columnNumber: 17
+              }, this), (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+                variant: "primary",
+                children: "Maybe this?"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 90,
+                columnNumber: 17
+              }, this)]
+            }, void 0, true, {
+              fileName: _jsxFileName,
+              lineNumber: 87,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 86,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 85,
+          columnNumber: 11
         }, this)]
       }, void 0, true, {
         fileName: _jsxFileName,
-        lineNumber: 62,
+        lineNumber: 63,
         columnNumber: 9
@@ -290,0 +364,0 @@ }, this)]

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

@@ -46,3 +46,3 @@ "use strict";
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "panel",
+            className: "hyp-panel",
             children: ["This is in a panel that has no header. A header is not required, but you are encouraged to use ", (0, _jsxDevRuntime.jsxDEV)("code", {
@@ -79,6 +79,6 @@ children: "card"
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "panel",
+            className: "hyp-panel",
             children: [(0, _jsxDevRuntime.jsxDEV)("header", {
               children: (0, _jsxDevRuntime.jsxDEV)("h2", {
-                className: "panel__title",
+                className: "hyp-panel__title",
                 children: "This is a panel title in a panel header"
@@ -113,6 +113,6 @@ }, void 0, false, {
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "panel panel--closeable",
+            className: "hyp-panel hyp-panel--closeable",
             children: [(0, _jsxDevRuntime.jsxDEV)("header", {
               children: [(0, _jsxDevRuntime.jsxDEV)("h2", {
-                className: "panel__title",
+                className: "hyp-panel__title",
                 children: "Panel title on a closeable panel"
@@ -124,3 +124,3 @@ }, void 0, false, {
               }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-                className: "panel__close",
+                className: "hyp-panel__close",
                 children: (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
@@ -168,6 +168,6 @@ icon: "cancel",
           children: (0, _jsxDevRuntime.jsxDEV)("div", {
-            className: "panel panel--closeable",
+            className: "hyp-panel hyp-panel--closeable",
             children: [(0, _jsxDevRuntime.jsxDEV)("header", {
               children: [(0, _jsxDevRuntime.jsxDEV)("h2", {
-                className: "panel__title",
+                className: "hyp-panel__title",
                 children: "Panel title"
@@ -179,3 +179,3 @@ }, void 0, false, {
               }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-                className: "panel__close",
+                className: "hyp-panel__close",
                 children: (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
@@ -205,3 +205,3 @@ icon: "cancel",
             }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-              className: "actions",
+              className: "hyp-actions",
               children: [(0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
@@ -208,0 +208,0 @@ title: "Cancel",

lib/pattern-library/components/PlaygroundApp.js

@@ -8,4 +8,8 @@ "use strict";
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _SvgIcon = require("../../components/SvgIcon");
 
+var _SharedColorPatterns = _interopRequireDefault(require("./patterns/SharedColorPatterns"));
+
 var _SharedMoleculePatterns = _interopRequireDefault(require("./patterns/SharedMoleculePatterns"));
@@ -44,3 +48,3 @@
       fileName: _jsxFileName,
-      lineNumber: 26,
+      lineNumber: 29,
       columnNumber: 7
@@ -51,3 +55,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", {
       fileName: _jsxFileName,
-      lineNumber: 27,
+      lineNumber: 30,
       columnNumber: 7
@@ -68,2 +72,6 @@ }, this)]
 const patternRoutes = [{
+  route: '/shared-colors',
+  title: 'Colors',
+  component: _SharedColorPatterns.default
+}, {
   route: '/shared-molecules',
@@ -115,6 +123,6 @@ title: 'Molecules',
   const allRoutes = routes.concat(extraRoutes);
-  const [route, navigate] = (0, _router.useRoute)(baseURL, allRoutes);
-  const content = route ? (0, _jsxDevRuntime.jsxDEV)(route.component, {}, void 0, false, {
+  const [activeRoute, navigate] = (0, _router.useRoute)(baseURL, allRoutes);
+  const content = activeRoute ? (0, _jsxDevRuntime.jsxDEV)(activeRoute.component, {}, void 0, false, {
     fileName: _jsxFileName,
-    lineNumber: 96,
+    lineNumber: 104,
     columnNumber: 5
@@ -127,3 +135,3 @@ }, this) : (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {
       fileName: _jsxFileName,
-      lineNumber: 99,
+      lineNumber: 107,
       columnNumber: 7
@@ -134,6 +142,21 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", {
       fileName: _jsxFileName,
-      lineNumber: 100,
+      lineNumber: 108,
       columnNumber: 7
     }, this)]
   }, void 0, true);
+  const routeGroups = [{
+    title: 'Foundations',
+    routes: patternRoutes
+  }, {
+    title: 'Common Components',
+    routes: componentRoutes
+  }];
+
+  if (extraRoutes.length) {
+    routeGroups.push({
+      title: 'Application Patterns',
+      routes: extraRoutes
+    });
+  }
+
   return (0, _jsxDevRuntime.jsxDEV)("main", {
@@ -152,3 +175,3 @@ className: "PlaygroundApp",
             fileName: _jsxFileName,
-            lineNumber: 109,
+            lineNumber: 126,
             columnNumber: 13
@@ -158,3 +181,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 108,
+          lineNumber: 125,
           columnNumber: 11
@@ -164,92 +187,31 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 107,
+        lineNumber: 124,
         columnNumber: 9
-      }, this), (0, _jsxDevRuntime.jsxDEV)("h2", {
-        children: "Common Patterns"
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 112,
-        columnNumber: 9
-      }, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
-        className: "PlaygroundApp__nav-list",
-        children: patternRoutes.map(({
-          route,
-          title
-        }) => (0, _jsxDevRuntime.jsxDEV)("li", {
-          className: "PlaygroundApp__nav-item",
-          children: (0, _jsxDevRuntime.jsxDEV)("a", {
-            href: `${route}`,
-            onClick: e => navigate(e, route),
-            children: title
-          }, route, false, {
-            fileName: _jsxFileName,
-            lineNumber: 116,
-            columnNumber: 15
-          }, this)
-        }, route, false, {
-          fileName: _jsxFileName,
-          lineNumber: 115,
-          columnNumber: 13
-        }, this))
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 113,
-        columnNumber: 9
-      }, this), (0, _jsxDevRuntime.jsxDEV)("h2", {
-        children: "Common Components"
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 126,
-        columnNumber: 9
-      }, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
-        className: "PlaygroundApp__nav-list",
-        children: componentRoutes.map(({
-          route,
-          title
-        }) => (0, _jsxDevRuntime.jsxDEV)("li", {
-          className: "PlaygroundApp__nav-item",
-          children: (0, _jsxDevRuntime.jsxDEV)("a", {
-            href: `${route}`,
-            onClick: e => navigate(e, route),
-            children: title
-          }, route, false, {
-            fileName: _jsxFileName,
-            lineNumber: 130,
-            columnNumber: 15
-          }, this)
-        }, route, false, {
-          fileName: _jsxFileName,
-          lineNumber: 129,
-          columnNumber: 13
-        }, this))
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 127,
-        columnNumber: 9
-      }, this), extraRoutes.length > 0 && (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {
+      }, this), routeGroups.map(rGroup => (0, _jsxDevRuntime.jsxDEV)("div", {
         children: [(0, _jsxDevRuntime.jsxDEV)("h2", {
-          children: "Application Patterns"
+          children: rGroup.title
         }, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 142,
+          lineNumber: 131,
           columnNumber: 13
         }, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
-          className: "PlaygroundApp__nav-list",
-          children: extraRoutes.map(({
+          children: rGroup.routes.map(({
             route,
             title
           }) => (0, _jsxDevRuntime.jsxDEV)("li", {
-            className: "PlaygroundApp__nav-item",
             children: (0, _jsxDevRuntime.jsxDEV)("a", {
+              className: (0, _classnames.default)('PlaygroundApp__nav-item', {
+                'is-active': activeRoute.route === route
+              }),
               href: `${route}`,
               onClick: e => navigate(e, route),
               children: title
-            }, route, false, {
+            }, void 0, false, {
               fileName: _jsxFileName,
-              lineNumber: 146,
+              lineNumber: 135,
               columnNumber: 19
             }, this)
-          }, route, false, {
+          }, title, false, {
             fileName: _jsxFileName,
-            lineNumber: 145,
+            lineNumber: 134,
             columnNumber: 17
@@ -259,9 +221,13 @@ }, this))
           fileName: _jsxFileName,
-          lineNumber: 143,
+          lineNumber: 132,
           columnNumber: 13
         }, this)]
-      }, void 0, true)]
+      }, rGroup.title, true, {
+        fileName: _jsxFileName,
+        lineNumber: 130,
+        columnNumber: 11
+      }, this))]
     }, void 0, true, {
       fileName: _jsxFileName,
-      lineNumber: 106,
+      lineNumber: 123,
       columnNumber: 7
@@ -273,3 +239,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
       fileName: _jsxFileName,
-      lineNumber: 159,
+      lineNumber: 150,
       columnNumber: 7
@@ -279,3 +245,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 105,
+    lineNumber: 122,
     columnNumber: 5
@@ -282,0 +248,0 @@ }, this);

package.json

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

styles/README.md

@@ -21,3 +21,4 @@ # SASS structure and conventions
 
-  Individual reusable mixins, e.g. `focus`
+  - At this time, the only publicly-available mixins are `focus` and `buttons` (for button customizations only—use only if you know what you're doing). Do not use other mixins.
+  - Mixins may not be available publicly in the future.
 
@@ -77,5 +78,6 @@ _Note_: `pattern-library.scss` is also used internally by this project to build a CSS bundle for serving the pattern library using `make dev`.
 - `base` modules should use element selectors (no class names).
-- Component class names should use PascalCase, e.g. `.HelpPanel`
-- Atomic-level utility classes should be prefixed with `.u-`, e.g. `.u-border--left`. These are classes that may be used additively to adjust styling on a single element.
-- Composite (molecule, organism) class names do not require prefixes, but should be lower-case, e.g. `.frame`.
+- Component class names should use PascalCase, e.g. `.HelpPanel`. All other classnames require a .`hyp-` prefix.
+- All utility and pattern classnames should be prefixed with `.hyp-`.
+- Atomic-level utility classes should be prefixed with `.hyp-u-`, e.g. `.hyp-u-border--left`. These are classes that may be used additively to adjust styling on a single element.
+- Composite (molecule, organism) class names do not require `u`-prefixes, but should be lower-case, e.g. `.hyp-frame`.
 
@@ -82,0 +84,0 @@ ### Variables

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

307639

increased by5.21%

Number of package files

85

increased by3.66%

Lines of code

3939

increased by5.1%

No dependency changes