feat(neuron-ui): add the story of connection status component, and set the network name to 14px

Author: Keith-CY

packages/neuron-ui/src/containers/Footer/index.tsx

@@ -57,7 +57,16 @@ export const NetworkStatus = ({ name, online }: { name: string; online: boolean
         iconName={online ? 'Connected' : 'Disconnected'}
         styles={{ root: { display: 'flex', alignItems: 'center' } }}
       />
-      <Text styles={{ root: [theme.fonts.small] }}>{name}</Text>
+      <Text
+        styles={{
+          root: {
+            fontSize: '14px',
+            lineHeight: '14px',
+          },
+        }}
+      >
+        {name}
+      </Text>
     </Stack>
   )
 }

packages/neuron-ui/src/index.tsx

@@ -1,32 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { HashRouter as Router, Route } from 'react-router-dom'
-import { loadTheme, getTheme } from 'office-ui-fabric-react'
-import {
-  AddCircle as AddIcon,
-  Alert as AlertIcon,
-  Checkmark as SuccessIcon,
-  Close as DismissIcon,
-  Copy as CopyIcon,
-  Down as ArrowDownIcon,
-  FormClose as ClearIcon,
-  FormAdd as CreateIcon,
-  FormPreviousLink as LeaveIcon,
-  FormUp as ExpandIcon,
-  FormUpload as ImportIcon,
-  LinkBottom as LinkBottomIcon,
-  LinkDown as LinkDownIcon,
-  LinkTop as LinkTopIcon,
-  LinkUp as LinkUpIcon,
-  Nodes as ConnectedIcon,
-  Scan as ScanIcon,
-  Search as SearchIcon,
-  SubtractCircle as RemoveIcon,
-  Update as UpdateIcon,
-} from 'grommet-icons'
 
 import 'styles/index.scss'
 import 'utils/i18n'
+import 'utils/loadTheme'
 import * as serviceWorker from 'serviceWorker'
 
 import Navbar from 'containers/Navbar'
@@ -35,53 +13,6 @@ import Main from 'containers/Main'
 import Footer from 'containers/Footer'
 import ErrorBoundary from 'components/ErrorBoundary'
 import withProviders from 'states/stateProvider'
-import { registerIcons } from 'utils/icons'
-
-loadTheme({
-  fonts: {
-    tiny: { fontSize: '11px' },
-    xSmall: { fontSize: '12px' },
-    small: { fontSize: '14px' },
-    smallPlus: { fontSize: '15px' },
-    medium: { fontSize: '16px' },
-    mediumPlus: { fontSize: '17px' },
-    large: { fontSize: '18px' },
-    xLarge: { fontSize: '22px' },
-    xxLarge: { fontSize: '28px' },
-    superLarge: { fontSize: '42px' },
-    mega: { fontSize: '72px' },
-  },
-})
-
-const theme = getTheme()
-const { semanticColors } = theme
-
-registerIcons({
-  icons: {
-    errorbadge: <AlertIcon size="16px" />,
-    completed: <SuccessIcon size="16px" />,
-    MiniCopy: <CopyIcon size="small" />,
-    Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
-    FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
-    LastPage: <LinkBottomIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
-    PrevPage: <LinkUpIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
-    NextPage: <LinkDownIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
-    ArrowDown: <ArrowDownIcon size="small" />,
-    ChevronRightMed: <ExpandIcon size="16px" style={{ transform: 'rotate(90deg) translate(2px, 0px)' }} />,
-    Scan: <ScanIcon />,
-    Import: <ImportIcon color="white" />,
-    Create: <CreateIcon />,
-    Add: <AddIcon />,
-    Remove: <RemoveIcon color="red" />,
-    Copy: <CopyIcon />,
-    Clear: <ClearIcon size="16px" />,
-    Dismiss: <DismissIcon size="16px" />,
-    Leave: <LeaveIcon />,
-    Connected: <ConnectedIcon size="small" color="green" />,
-    Disconnected: <AlertIcon size="small" color="red" />,
-    Updating: <UpdateIcon size="16px" style={{ animation: 'rotate360 3s linear infinite' }} />,
-  },
-})
 
 export const containers: CustomRouter.Route[] = [
   {

packages/neuron-ui/src/stories/NetworkStatus.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, text, boolean } from '@storybook/addon-knobs'
+import { NetworkStatus } from 'containers/Footer'
+
+const states = {
+  Online: {
+    name: 'network name',
+    online: true,
+  },
+  Offline: {
+    name: 'network',
+    online: false,
+  },
+}
+
+const stories = storiesOf('Connection Status', module).addDecorator(withKnobs)
+
+Object.entries(states).forEach(([title, props]) => {
+  stories.add(title, () => {
+    return <NetworkStatus {...props} />
+  })
+})
+
+stories.add('With knobs', () => {
+  const props = {
+    name: text('Network name', 'network name'),
+    online: boolean('online', false),
+  }
+  return <NetworkStatus {...props} />
+})

packages/neuron-ui/src/stories/index.tsx

@@ -1,3 +1,7 @@
+import 'styles/index.scss'
+import './styles.scss'
+import 'utils/i18n'
+import 'utils/loadTheme'
 import './Overview.stories'
 import './Addresses.stories'
 import './History.stories'
@@ -9,5 +13,4 @@ import './NetworkSetting.stories'
 import './PasswordRequest.stories'
 import './TransactionFeePanel.stories'
 import './SyncStatus.stories'
-import 'styles/index.scss'
-import './styles.scss'
+import './NetworkStatus.stories'

packages/neuron-ui/src/utils/loadTheme.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { loadTheme, getTheme } from 'office-ui-fabric-react'
+
+import {
+  AddCircle as AddIcon,
+  Alert as AlertIcon,
+  Checkmark as SuccessIcon,
+  Close as DismissIcon,
+  Copy as CopyIcon,
+  Down as ArrowDownIcon,
+  FormClose as ClearIcon,
+  FormAdd as CreateIcon,
+  FormPreviousLink as LeaveIcon,
+  FormUp as ExpandIcon,
+  FormUpload as ImportIcon,
+  LinkBottom as LinkBottomIcon,
+  LinkDown as LinkDownIcon,
+  LinkTop as LinkTopIcon,
+  LinkUp as LinkUpIcon,
+  Nodes as ConnectedIcon,
+  Scan as ScanIcon,
+  Search as SearchIcon,
+  SubtractCircle as RemoveIcon,
+  Update as UpdateIcon,
+} from 'grommet-icons'
+
+import { registerIcons } from 'utils/icons'
+
+loadTheme({
+  fonts: {
+    tiny: { fontSize: '11px' },
+    xSmall: { fontSize: '12px' },
+    small: { fontSize: '14px' },
+    smallPlus: { fontSize: '15px' },
+    medium: { fontSize: '16px' },
+    mediumPlus: { fontSize: '17px' },
+    large: { fontSize: '18px' },
+    xLarge: { fontSize: '22px' },
+    xxLarge: { fontSize: '28px' },
+    superLarge: { fontSize: '42px' },
+    mega: { fontSize: '72px' },
+  },
+})
+
+const theme = getTheme()
+const { semanticColors } = theme
+
+registerIcons({
+  icons: {
+    errorbadge: <AlertIcon size="16px" />,
+    completed: <SuccessIcon size="16px" />,
+    MiniCopy: <CopyIcon size="small" />,
+    Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
+    FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    LastPage: <LinkBottomIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    PrevPage: <LinkUpIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    NextPage: <LinkDownIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    ArrowDown: <ArrowDownIcon size="small" />,
+    ChevronRightMed: <ExpandIcon size="16px" style={{ transform: 'rotate(90deg) translate(2px, 0px)' }} />,
+    Scan: <ScanIcon />,
+    Import: <ImportIcon color="white" />,
+    Create: <CreateIcon />,
+    Add: <AddIcon />,
+    Remove: <RemoveIcon color="red" />,
+    Copy: <CopyIcon />,
+    Clear: <ClearIcon size="16px" />,
+    Dismiss: <DismissIcon size="16px" />,
+    Leave: <LeaveIcon />,
+    Connected: <ConnectedIcon size="small" color="green" />,
+    Disconnected: <AlertIcon size="small" color="red" />,
+    Updating: <UpdateIcon size="16px" style={{ animation: 'rotate360 3s linear infinite' }} />,
+  },
+})
+
+export default undefined