Merge pull request #3 from decentraland/feat/navbar

feat: navbar

.storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-options/register'
 import '@storybook/addon-links/register'
 import '@storybook/addon-storysource/register'
+import '@storybook/addon-actions/register'

README.md

@@ -1,6 +1,6 @@
 # Decentraland UI [![codecov](https://codecov.io/gh/decentraland/ui/branch/master/graph/badge.svg)](https://codecov.io/gh/decentraland/ui) [![CircleCI](https://circleci.com/gh/decentraland/ui.svg?style=svg)](https://circleci.com/gh/decentraland/ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-`semantic-ui-react` themed with Decentrland's look & feel + some of our own components
+This is basically `semantic-ui-react` themed with Decentrland's look & feel + some of our own components
 
 See: [ui.decentraland.org](https://ui.decentraland.org)
 
@@ -83,6 +83,10 @@ npm run test:visual
 
 To update the snapshots add `-- -u` after the test you want to update, i.e: `npm run test:visual -- -u`
 
+**IMPORTANT**
+
+You need to `npm run build:storybook` before running `npm run test:visual`!
+
 ## CI/CD
 
 We run coverage + visual tests on CircleCI for every PR. When merged to master we send coverage reports to CodeCov, deploy automatically to [ui.decentraland.org](https://ui.decentraland.org) and release a new version via `semantic-release`

package.json

@@ -48,6 +48,7 @@
     "@types/node": "^10.3.5",
     "@types/react": "^16.4.1",
     "@types/react-test-renderer": "^16.0.1",
+    "@types/storybook__react": "^3.0.7",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-require-context-hook": "^1.0.0",

src/components/Address/Address.tsx

@@ -9,9 +9,7 @@ type Props = {
   className?: string
 }
 
-type State = {}
-
-export class Address extends React.Component<Props, State> {
+export class Address extends React.Component<Props> {
   static defaultProps = {
     className: '',
     strong: false,

src/components/Blockie/Blockie.tsx

@@ -10,12 +10,10 @@ type Props = {
   size?: number
   scale?: number
   className?: string
-  children?: any
+  children?: React.ReactNode
 }
 
-type State = {}
-
-export class Blockie extends React.PureComponent<Props, State> {
+export class Blockie extends React.PureComponent<Props> {
   private shouldRefresh: boolean = false
   public canvas: HTMLCanvasElement = null
   static defaultProps = {

src/components/Mana/Mana.css

@@ -2,6 +2,7 @@
   display: inline;
   text-overflow: ellipsis;
   overflow: hidden;
+  color: var(--text);
 }
 .dcl.mana .symbol {
   color: var(--neon-blue);

src/components/Mana/Mana.tsx

@@ -9,9 +9,7 @@ type Props = {
   children?: React.ReactChild
 }
 
-type State = {}
-
-export class Mana extends React.Component<Props, State> {
+export class Mana extends React.Component<Props> {
   static defaultProps = {
     className: ''
   }

src/components/Navbar/Navbar.css

@@ -0,0 +1,69 @@
+.dcl.navbar {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--navbar-height);
+  padding: 0px 30px;
+}
+
+.dcl.navbar-logo {
+  cursor: pointer;
+}
+
+.dcl.account-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  cursor: pointer;
+}
+
+.dcl.account-wrapper .dcl.mana {
+  display: inline-block;
+  margin: 0em 1em 0em 0em;
+}
+
+.dcl.account-wrapper .dcl.blockie {
+  margin-top: -0.2em;
+}
+
+.dcl.navbar-account {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.dcl.navbar-account .ui.menu.navbar-account-menu {
+  margin: 0em 1em 0em 0em;
+}
+
+.dcl.navbar-account .ui.menu.navbar-account-menu .item .icon {
+  margin: 0em;
+}
+
+.dcl.navbar-back {
+  display: inline-block;
+  position: relative;
+  width: 52px;
+  height: 52px;
+  background-color: var(--secondary);
+  border-radius: 100%;
+}
+
+.dcl.navbar-back .icon.chevron {
+  position: absolute;
+  top: 16px;
+  left: 12px;
+}
+
+.dcl.navbar .ui.menu .item {
+  color: var(--secondary-text);
+  border-radius: var(--radius);
+  text-transform: uppercase;
+}
+
+.dcl.navbar .ui.menu .item:hover,
+.dcl.navbar .ui.menu .item.active {
+  color: var(--text-on-primary);
+  background: var(--primary);
+}

src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { Icon, Menu, Navbar } from '../..'
+
+const pageStyle = {
+  width: 1024,
+  borderRadius: 8
+  //border: '1px solid #eee'
+}
+
+storiesOf('Navbar', module)
+  .add('Static', () => {
+    return (
+      <div style={pageStyle}>
+        <Navbar />
+      </div>
+    )
+  })
+  .add('Connecting...', () => {
+    return (
+      <div style={pageStyle}>
+        <Navbar
+          isConnected={false}
+          isConnecting
+          connectingMenuItem={<Menu.Item>Connecting...</Menu.Item>}
+        />
+      </div>
+    )
+  })
+  .add('Logged In', () => {
+    const address = '0x0a7a3b5d56470f7d4bd481da3038c9b3508836ea'
+    return (
+      <div style={pageStyle}>
+        <Navbar
+          mana={20000}
+          address={address}
+          onClickAccount={action('Account clicked!')}
+          onClickLogo={action('Logo clicked!')}
+        />
+      </div>
+    )
+  })
+  .add('Logged Out', () => {
+    return (
+      <div style={pageStyle}>
+        <Navbar
+          isConnected={false}
+          isConnecting
+          connectingMenuItem={
+            <Menu.Item onClick={action('Sign In clicked!')}>Sign In</Menu.Item>
+          }
+        />
+      </div>
+    )
+  })
+  .add('With Menu', () => {
+    const address = '0x0a7a3b5d56470f7d4bd481da3038c9b3508836ea'
+    const menuItems = (
+      <>
+        <Menu.Item active onClick={action('Atlas clicked')}>
+          Atlas
+        </Menu.Item>
+        <Menu.Item onClick={action('Marketplace clicked!')}>
+          Marketplace
+        </Menu.Item>
+        <Menu.Item onClick={action('My Land clicked!')}>My Land</Menu.Item>
+      </>
+    )
+    const accountMenuItems = (
+      <Menu.Item onClick={action('Activity clicked!')}>
+        <Icon name="bell" />
+      </Menu.Item>
+    )
+    return (
+      <div style={pageStyle}>
+        <Navbar
+          mana={20000}
+          address={address}
+          menuItems={menuItems}
+          accountMenuItems={accountMenuItems}
+          activePage="Atlas" /* this is for the mobile navbar */
+          onClickAccount={action('Account clicked!')}
+          onClickLogo={action('Logo clicked!')}
+        />
+      </div>
+    )
+  })
+  .add('Modal', () => {
+    return (
+      <div style={pageStyle}>
+        <Navbar isModal onBack={action('Go Back clicked!')} />
+      </div>
+    )
+  })