@arch-ui/navbar - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # @arch-ui/navbar
 
+## 0.0.4
+- [patch] [85cb44a9](https://github.com/keystonejs/keystone-5/commit/85cb44a9):
+
+  - Add PrimaryNavHeading component and change styles
+
 ## 0.0.3
@@ -4,0 +9,0 @@

dist/navbar.cjs.dev.js

@@ -46,8 +46,7 @@ 'use strict';
 var PrimaryNav = styled.nav({
-  backgroundColor: theme.colors.N10,
+  backgroundColor: 'rgba(9, 30, 66, 0.02)',
   boxSizing: 'border-box',
   display: 'flex',
   flexFlow: 'column nowrap',
-  fontSize: '0.9rem',
-  fontWeight: 500,
+  fontSize: 15,
   height: '100vh',
@@ -82,4 +81,2 @@ position: 'fixed',
     paddingBottom: PRIMARY_NAV_GUTTER,
-    paddingLeft: PRIMARY_NAV_GUTTER,
-    paddingRight: PRIMARY_NAV_GUTTER,
     width: '100%',
@@ -97,7 +94,9 @@ ':before': before,
 var PrimaryNavItem = styled(ItemElement)(function (_ref2) {
-  var isSelected = _ref2.isSelected;
+  var depth = _ref2.depth,
+      isSelected = _ref2.isSelected;
   var selectedStyles = isSelected ? {
     '&, :hover, :active, :focus': {
-      backgroundColor: theme.colors.N80,
-      color: 'white'
+      borderLeftColor: theme.colors.B.base,
+      backgroundColor: theme.colors.B.A10,
+      fontWeight: 500
     }
@@ -107,3 +106,3 @@ } : {};
     border: 0,
-    borderRadius: theme.borderRadius,
+    borderLeft: '3px solid transparent',
     color: theme.colors.N90,
@@ -113,3 +112,3 @@ display: 'block',
     overflow: 'hidden',
-    paddingLeft: PRIMARY_NAV_GUTTER,
+    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
     paddingRight: PRIMARY_NAV_GUTTER,
@@ -122,12 +121,23 @@ paddingBottom: theme.gridSize,
     ':hover, :focus': {
-      backgroundColor: theme.colors.B.L80,
-      color: theme.colors.B.D20,
-      outline: 0,
+      backgroundColor: theme.colors.B.A5,
+      color: theme.colors.N100,
       textDecoration: 'none'
     },
     ':active': {
-      backgroundColor: theme.colors.B.L70
+      backgroundColor: theme.colors.B.A10
     }
   }, selectedStyles);
 });
+var PrimaryNavHeading = styled.h3(function (_ref3) {
+  var depth = _ref3.depth;
+  return {
+    color: theme.colors.N40,
+    fontSize: '0.85em',
+    fontWeight: 'bold',
+    marginTop: '2em',
+    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
+    paddingRight: PRIMARY_NAV_GUTTER,
+    textTransform: 'uppercase'
+  };
+});
 var Wrapper = styled.nav({
@@ -164,2 +174,3 @@ borderBottom: "1px solid ".concat(theme.colors.N10),
 exports.PrimaryNavItem = PrimaryNavItem;
+exports.PrimaryNavHeading = PrimaryNavHeading;
 exports.PrimaryNavScrollArea = PrimaryNavScrollArea;
@@ -166,0 +177,0 @@ exports.NavGroupIcons = NavGroupIcons;

dist/navbar.cjs.prod.js

@@ -36,8 +36,7 @@ "use strict";
   PrimaryNav = styled.nav({
-    backgroundColor: theme.colors.N10,
+    backgroundColor: "rgba(9, 30, 66, 0.02)",
     boxSizing: "border-box",
     display: "flex",
     flexFlow: "column nowrap",
-    fontSize: "0.9rem",
-    fontWeight: 500,
+    fontSize: 15,
     height: "100vh",
@@ -71,4 +70,2 @@ position: "fixed",
       paddingBottom: PRIMARY_NAV_GUTTER,
-      paddingLeft: PRIMARY_NAV_GUTTER,
-      paddingRight: PRIMARY_NAV_GUTTER,
       width: "100%",
@@ -86,14 +83,16 @@ ":before": before,
   PrimaryNavItem = styled(ItemElement)(function(_ref2) {
-    var selectedStyles = _ref2.isSelected
-      ? {
-          "&, :hover, :active, :focus": {
-            backgroundColor: theme.colors.N80,
-            color: "white"
+    var depth = _ref2.depth,
+      selectedStyles = _ref2.isSelected
+        ? {
+            "&, :hover, :active, :focus": {
+              borderLeftColor: theme.colors.B.base,
+              backgroundColor: theme.colors.B.A10,
+              fontWeight: 500
+            }
           }
-        }
-      : {};
+        : {};
     return _objectSpread(
       {
         border: 0,
-        borderRadius: theme.borderRadius,
+        borderLeft: "3px solid transparent",
         color: theme.colors.N90,
@@ -103,3 +102,3 @@ display: "block",
         overflow: "hidden",
-        paddingLeft: PRIMARY_NAV_GUTTER,
+        paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
         paddingRight: PRIMARY_NAV_GUTTER,
@@ -112,8 +111,7 @@ paddingBottom: theme.gridSize,
         ":hover, :focus": {
-          backgroundColor: theme.colors.B.L80,
-          color: theme.colors.B.D20,
-          outline: 0,
+          backgroundColor: theme.colors.B.A5,
+          color: theme.colors.N100,
           textDecoration: "none"
         },
-        ":active": { backgroundColor: theme.colors.B.L70 }
+        ":active": { backgroundColor: theme.colors.B.A10 }
       },
@@ -123,2 +121,14 @@ selectedStyles
   }),
+  PrimaryNavHeading = styled.h3(function(_ref3) {
+    var depth = _ref3.depth;
+    return {
+      color: theme.colors.N40,
+      fontSize: "0.85em",
+      fontWeight: "bold",
+      marginTop: "2em",
+      paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
+      paddingRight: PRIMARY_NAV_GUTTER,
+      textTransform: "uppercase"
+    };
+  }),
   Wrapper = styled.nav({
@@ -150,2 +160,3 @@ borderBottom: "1px solid ".concat(theme.colors.N10),
   (exports.PrimaryNavItem = PrimaryNavItem),
+  (exports.PrimaryNavHeading = PrimaryNavHeading),
   (exports.PrimaryNavScrollArea = PrimaryNavScrollArea),
@@ -152,0 +163,0 @@ (exports.NavGroupIcons = NavGroupIcons),

dist/navbar.esm.js

 import _objectSpread from '@babel/runtime/helpers/esm/objectSpread';
 import styled from '@emotion/styled';
-import { gridSize, colors, borderRadius } from '@arch-ui/theme';
+import { gridSize, colors } from '@arch-ui/theme';
 import _extends from '@babel/runtime/helpers/esm/extends';
@@ -30,8 +30,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 var PrimaryNav = styled.nav({
-  backgroundColor: colors.N10,
+  backgroundColor: 'rgba(9, 30, 66, 0.02)',
   boxSizing: 'border-box',
   display: 'flex',
   flexFlow: 'column nowrap',
-  fontSize: '0.9rem',
-  fontWeight: 500,
+  fontSize: 15,
   height: '100vh',
@@ -66,4 +65,2 @@ position: 'fixed',
     paddingBottom: PRIMARY_NAV_GUTTER,
-    paddingLeft: PRIMARY_NAV_GUTTER,
-    paddingRight: PRIMARY_NAV_GUTTER,
     width: '100%',
@@ -81,7 +78,9 @@ ':before': before,
 var PrimaryNavItem = styled(ItemElement)(function (_ref2) {
-  var isSelected = _ref2.isSelected;
+  var depth = _ref2.depth,
+      isSelected = _ref2.isSelected;
   var selectedStyles = isSelected ? {
     '&, :hover, :active, :focus': {
-      backgroundColor: colors.N80,
-      color: 'white'
+      borderLeftColor: colors.B.base,
+      backgroundColor: colors.B.A10,
+      fontWeight: 500
     }
@@ -91,3 +90,3 @@ } : {};
     border: 0,
-    borderRadius: borderRadius,
+    borderLeft: '3px solid transparent',
     color: colors.N90,
@@ -97,3 +96,3 @@ display: 'block',
     overflow: 'hidden',
-    paddingLeft: PRIMARY_NAV_GUTTER,
+    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
     paddingRight: PRIMARY_NAV_GUTTER,
@@ -106,12 +105,23 @@ paddingBottom: gridSize,
     ':hover, :focus': {
-      backgroundColor: colors.B.L80,
-      color: colors.B.D20,
-      outline: 0,
+      backgroundColor: colors.B.A5,
+      color: colors.N100,
       textDecoration: 'none'
     },
     ':active': {
-      backgroundColor: colors.B.L70
+      backgroundColor: colors.B.A10
     }
   }, selectedStyles);
 });
+var PrimaryNavHeading = styled.h3(function (_ref3) {
+  var depth = _ref3.depth;
+  return {
+    color: colors.N40,
+    fontSize: '0.85em',
+    fontWeight: 'bold',
+    marginTop: '2em',
+    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
+    paddingRight: PRIMARY_NAV_GUTTER,
+    textTransform: 'uppercase'
+  };
+});
 
@@ -145,2 +155,2 @@ var Wrapper = styled.nav({
 
-export { BrandItem, PrimaryNav, PrimaryNavItem, PrimaryNavScrollArea, NavGroupIcons, PRIMARY_NAV_GUTTER, SecondaryNav, SecondaryNavItem };
+export { BrandItem, PrimaryNav, PrimaryNavItem, PrimaryNavHeading, PrimaryNavScrollArea, NavGroupIcons, PRIMARY_NAV_GUTTER, SecondaryNav, SecondaryNavItem };

package.json

 {
   "name": "@arch-ui/navbar",
   "description": "Navbar UI as used in @keystone-alpha Admin UI.",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": "Jed Watson",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.js

@@ -6,2 +6,3 @@ // @flow
   PrimaryNavItem,
+  PrimaryNavHeading,
   PrimaryNavScrollArea,
@@ -8,0 +9,0 @@ NavGroupIcons,

src/PrimaryNav.js

@@ -5,3 +5,3 @@ // @flow
 
-import { borderRadius, colors, gridSize } from '@arch-ui/theme';
+import { colors, gridSize } from '@arch-ui/theme';
 import { ItemElement } from './common';
@@ -21,8 +21,7 @@
 export const PrimaryNav = styled.nav({
-  backgroundColor: colors.N10,
+  backgroundColor: 'rgba(9, 30, 66, 0.02)',
   boxSizing: 'border-box',
   display: 'flex',
   flexFlow: 'column nowrap',
-  fontSize: '0.9rem',
-  fontWeight: 500,
+  fontSize: 15,
   height: '100vh',
@@ -51,4 +50,2 @@ position: 'fixed',
     paddingBottom: PRIMARY_NAV_GUTTER,
-    paddingLeft: PRIMARY_NAV_GUTTER,
-    paddingRight: PRIMARY_NAV_GUTTER,
     width: '100%',
@@ -68,8 +65,9 @@
 
-export const PrimaryNavItem = styled(ItemElement)(({ isSelected }) => {
+export const PrimaryNavItem = styled(ItemElement)(({ depth, isSelected }) => {
   const selectedStyles = isSelected
     ? {
         '&, :hover, :active, :focus': {
-          backgroundColor: colors.N80,
-          color: 'white',
+          borderLeftColor: colors.B.base,
+          backgroundColor: colors.B.A10,
+          fontWeight: 500,
         },
@@ -81,3 +79,3 @@ }
     border: 0,
-    borderRadius,
+    borderLeft: '3px solid transparent',
     color: colors.N90,
@@ -87,3 +85,3 @@ display: 'block',
     overflow: 'hidden',
-    paddingLeft: PRIMARY_NAV_GUTTER,
+    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
     paddingRight: PRIMARY_NAV_GUTTER,
@@ -97,9 +95,8 @@ paddingBottom: gridSize,
     ':hover, :focus': {
-      backgroundColor: colors.B.L80,
-      color: colors.B.D20,
-      outline: 0,
+      backgroundColor: colors.B.A5,
+      color: colors.N100,
       textDecoration: 'none',
     },
     ':active': {
-      backgroundColor: colors.B.L70,
+      backgroundColor: colors.B.A10,
     },
@@ -110,1 +107,10 @@
 });
+export const PrimaryNavHeading = styled.h3(({ depth }) => ({
+  color: colors.N40,
+  fontSize: '0.85em',
+  fontWeight: 'bold',
+  marginTop: '2em',
+  paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
+  paddingRight: PRIMARY_NAV_GUTTER,
+  textTransform: 'uppercase',
+}));

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

19467

increased by9.01%

Lines of code

610

increased by6.83%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes