Implement new Sidebar

.storybook/preview-head.html

@@ -1,3 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
   @font-face {
     font-family: 'Monument';

package.json

@@ -37,32 +37,33 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.17.12",
     "@babel/preset-react": "^7.17.12",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/node-logger": "^6.4.22",
+    "@storybook/addon-actions": "^6.5.3",
+    "@storybook/addon-docs": "^6.5.3",
+    "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-interactions": "^6.5.3",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/node-logger": "^6.5.3",
     "@storybook/preset-create-react-app": "^4.1.0",
-    "@storybook/react": "^6.4.22",
+    "@storybook/react": "^6.5.3",
     "@storybook/testing-library": "^0.0.11",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.24.0",
-    "@typescript-eslint/parser": "^5.24.0",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
     "babel-loader": "^8.2.5",
     "eslint": "^8.15.0",
     "eslint-config-pluralsh": "^3.1.0",
     "react-scripts": "5.0.1",
+    "react-router-dom": "^6.3.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
-    "honorable": ">=0.88.0",
-    "honorable-theme-default": ">=0.47.0",
     "@emotion/react": "*",
     "@emotion/styled": "*",
+    "honorable": ">=0.92.0",
+    "honorable-theme-default": ">=0.48.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   }

src/components/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import Avatar from './Avatar'
+import { Avatar } from 'honorable'
 
 export default {
   title: 'Avatar',
@@ -28,7 +28,7 @@ ComplexName.args = {
 export const Image = Template.bind({})
 
 Image.args = {
-  imageUrl: 'https://avatars.githubusercontent.com/u/4154003?v=4',
+  src: 'https://avatars.githubusercontent.com/u/4154003?v=4',
 }
 
 export const Small = Template.bind({})

src/components/Icons.stories.tsx

@@ -1,3 +1,4 @@
+import ArrowTopRightIcon from './icons/ArrowTopRightIcon'
 import BotIcon from './icons/BotIcon'
 import BrowserIcon from './icons/BrowserIcon'
 import BundleIcon from './icons/BundleIcon'
@@ -42,7 +43,7 @@ import InvoicesIcon from './icons/InvoicesIcon'
 import KeyIcon from './icons/KeyIcon'
 import KeyPairIcon from './icons/KeyPairIcon'
 import LifePreserverIcon from './icons/LifePreserverIcon'
-import LightingIcon from './icons/LightingIcon'
+import LightningIcon from './icons/LightningIcon'
 import LinkoutIcon from './icons/LinkoutIcon'
 import LinksIcon from './icons/LinksIcon'
 import ListIcon from './icons/ListIcon'
@@ -89,6 +90,7 @@ import VolumesIcon from './icons/VolumesIcon'
 import WebhooksIcon from './icons/WebhooksIcon'
 
 const icons = {
+  ArrowTopRightIcon,
   BotIcon,
   BrowserIcon,
   BundleIcon,
@@ -133,7 +135,7 @@ const icons = {
   KeyIcon,
   KeyPairIcon,
   LifePreserverIcon,
-  LightingIcon,
+  LightningIcon,
   LinkoutIcon,
   LinksIcon,
   ListIcon,

src/components/Sidebar.stories.tsx

@@ -40,6 +40,7 @@ function Template(args: any) {
         createItem({
           name: 'User Attributes',
           Icon: ScrollIcon,
+          url: '/user-attributes',
         }),
         createItem({
           name: 'Password',
@@ -257,6 +258,13 @@ function Template(args: any) {
         >
           Go to /explore/public
         </button>
+        <button
+          type="button"
+          style={{ marginTop: '1rem' }}
+          onClick={() => setActiveUrl('/user-attributes')}
+        >
+          Go to /user-attributes
+        </button>
       </Flex>
     </Flex>
   )
@@ -265,8 +273,17 @@ function Template(args: any) {
 export const Default = Template.bind({})
 
 Default.args = {
-  user: {
-    name: 'Jane Smith',
-    email: '[email protected]',
-  },
+  userName: 'Jane Smith',
+  userOrganization: 'Plural',
+  onUserClick: () => window.alert('User clicked'),
+  onNotificationsClick: () => window.alert('Notifications clicked'),
+  onUpdateClick: () => window.alert('Update clicked'),
+  notificationsCount: 8,
+  hasUpdate: true,
+}
+
+export const NoOrganization = Template.bind({})
+
+NoOrganization.args = {
+  userName: 'Jane Smith',
 }