Merge pull request #32 from qoretechnologies/feature/navbar

Navbar

__tests__/menu.test.tsx

@@ -7,7 +7,7 @@ import {
   ReqoreUIProvider,
 } from '../src/index';
 
-test('Renders Menu properly', async () => {
+test('Renders Menu properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreMenu>

__tests__/navbar.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import {
+  ReqoreHeader,
+  ReqoreNavbarDivider,
+  ReqoreNavbarGroup,
+  ReqoreNavbarItem,
+  ReqoreUIProvider,
+} from '../src';
+
+test('Renders Navbar properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreHeader>
+        <ReqoreNavbarGroup>
+          <ReqoreNavbarItem>Logo</ReqoreNavbarItem>
+        </ReqoreNavbarGroup>
+        <ReqoreNavbarGroup position='right'>
+          <ReqoreNavbarItem>Item</ReqoreNavbarItem>
+          <ReqoreNavbarDivider />
+          <ReqoreNavbarItem>Item 2</ReqoreNavbarItem>
+        </ReqoreNavbarGroup>
+      </ReqoreHeader>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-navbar-header').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-navbar-group').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-navbar-divider').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-navbar-item').length).toBe(3);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Navbar/divider.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+
+export interface IReqoreNavbarDividerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'header' | 'footer';
+}
+
+const StyledNavbarDivider = styled.div<{
+  theme: IReqoreTheme;
+  type?: 'header' | 'footer';
+}>`
+  position: relative;
+  width: 20px;
+  height: 100%;
+  background-color: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 50%;
+    background-color: ${({ theme, type }) =>
+      getReadableColor(
+        theme[type]?.background || theme[type]?.main || theme.main,
+        undefined,
+        undefined,
+        true
+      )};
+    opacity: 0.2;
+  }
+`;
+
+const ReqoreNavbarDivider = forwardRef(
+  ({ type, ...rest }: IReqoreNavbarDividerProps, ref: any) => (
+    <StyledNavbarDivider
+      type={type}
+      className={`${rest.className || ''} reqore-navbar-divider`}
+      ref={ref}
+    />
+  )
+);
+
+export default ReqoreNavbarDivider;

src/components/Navbar/group.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+
+export interface IReqoreNavbarGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  position?: 'right' | 'left';
+  type?: 'footer' | 'header';
+  children?: any;
+}
+
+export interface IReqoreNavbarGroupStyle extends IReqoreNavbarGroupProps {
+  theme: IReqoreTheme;
+}
+
+const StyledNavbarGroup = styled.div<IReqoreNavbarGroupStyle>`
+  ${({ position }: IReqoreNavbarGroupStyle) => css`
+    height: 100%;
+    float: ${position};
+    color: inherit;
+    background-color: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
+const ReqoreNavbarGroup = forwardRef(
+  (
+    { position = 'left', children, type, ...rest }: IReqoreNavbarGroupProps,
+    ref: any
+  ) => (
+    <ReqoreThemeProvider>
+      <StyledNavbarGroup
+        {...rest}
+        className={`${rest.className || ''} reqore-navbar-group`}
+        position={position}
+        ref={ref}
+      >
+        {React.Children.map(children, (child) =>
+          React.cloneElement(child, { type })
+        )}
+      </StyledNavbarGroup>
+    </ReqoreThemeProvider>
+  )
+);
+
+export default ReqoreNavbarGroup;

src/components/Navbar/index.tsx

@@ -0,0 +1,72 @@
+import { darken } from 'polished';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { getMainColor, getReadableColor } from '../../helpers/colors';
+
+export interface IReqoreNavbarProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  position?: 'top' | 'bottom';
+  type?: 'header' | 'footer';
+}
+
+export interface IReqoreNavbarStyle extends IReqoreNavbarProps {
+  theme: IReqoreTheme;
+}
+
+const StyledNavbar = styled.div<IReqoreNavbarStyle>`
+  ${({ theme, type }: IReqoreNavbarStyle) => css`
+    height: 50px;
+    width: 100%;
+    color: ${
+      theme[type]?.color ||
+      getReadableColor(
+        theme[type]?.background || theme[type]?.main || theme.main,
+        undefined,
+        undefined,
+        true
+      )
+    };
+    background-color: ${
+      theme[type]?.background || theme[type]?.main || theme.main
+    };
+    border-${type === 'header' ? 'bottom' : 'top'}: 1px solid ${
+    theme[type]?.border || darken(0.1, getMainColor(theme, type))
+  };
+  `}
+`;
+
+const ReqoreNavbar = forwardRef(
+  (
+    { position = 'top', children, type, ...rest }: IReqoreNavbarProps,
+    ref: any
+  ) => (
+    <ReqoreThemeProvider>
+      <StyledNavbar
+        {...rest}
+        className={`${rest.className || ''} reqore-navbar-${type}`}
+        position={position}
+        type={type}
+        ref={ref}
+      >
+        {React.Children.map(children, (child) =>
+          React.cloneElement(child, { type })
+        )}
+      </StyledNavbar>
+    </ReqoreThemeProvider>
+  )
+);
+
+export const ReqoreHeader = forwardRef(
+  (props: IReqoreNavbarProps, ref: any) => (
+    <ReqoreNavbar {...props} type='header' ref={ref} />
+  )
+);
+
+export const ReqoreFooter = forwardRef(
+  (props: IReqoreNavbarProps, ref: any) => (
+    <ReqoreNavbar {...props} type='footer' ref={ref} />
+  )
+);

src/components/Navbar/item.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { changeLightness, getMainColor } from '../../helpers/colors';
+
+export interface IReqoreNavbarItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  interactive?: boolean;
+  type?: 'header' | 'footer';
+}
+
+export interface IReqoreNavbarItemStyle extends IReqoreNavbarItemProps {
+  theme?: IReqoreTheme;
+}
+
+const StyledNavbarItem = styled.div<IReqoreNavbarItemStyle>`
+  height: 100%;
+  min-width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  color: inherit;
+  background-color: inherit;
+
+  ${({ interactive, theme, type }: IReqoreNavbarItemStyle) =>
+    interactive &&
+    css`
+      transition: background-color 0.1s linear;
+      cursor: pointer;
+      &:hover {
+        background-color: ${theme[type]?.hoverColor ||
+        changeLightness(getMainColor(theme, type), 0.05)};
+      }
+    `}
+`;
+
+const ReqoreNavbarItem = forwardRef(
+  (
+    { interactive, children, type, ...rest }: IReqoreNavbarItemProps,
+    ref: any
+  ) => (
+    <ReqoreThemeProvider>
+      <StyledNavbarItem
+        {...rest}
+        className={`${rest.className || ''} reqore-navbar-item`}
+        interactive={interactive}
+        type={type}
+        ref={ref}
+      >
+        {children}
+      </StyledNavbarItem>
+    </ReqoreThemeProvider>
+  )
+);
+
+export default ReqoreNavbarItem;

src/components/Sidebar/index.tsx

@@ -77,13 +77,6 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
     flex: 1;
   }
 
-  #menuCollapse {
-    border-top: 1px solid
-      ${({ theme }) =>
-        theme.sidebar?.item?.border ||
-        darken(0.04, getMainColor(theme, 'sidebar'))};
-  }
-
   &.expanded {
     min-width: 180px !important;
     max-width: 180px !important;
@@ -281,6 +274,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
 
     .sidebarItem,
     .sidebarSubItem {
+      min-height: 50px;
       display: flex;
       align-items: center;
       cursor: pointer;

src/constants/theme.ts

@@ -41,6 +41,20 @@ export interface IReqoreTheme {
   popover?: {
     main: string;
   };
+  header?: {
+    main?: string;
+    color?: string;
+    border?: string;
+    background?: string;
+    hoverColor?: string;
+  };
+  footer?: {
+    main?: string;
+    color?: string;
+    border?: string;
+    background?: string;
+    hoverColor?: string;
+  };
 }
 
 export interface IReqoreThemeNotification {

src/index.tsx

@@ -3,6 +3,10 @@ import '@blueprintjs/core/lib/css/blueprint.css';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';
 export { default as ReqoreMenuItem } from './components/Menu/item';
+export { ReqoreFooter, ReqoreHeader } from './components/Navbar';
+export { default as ReqoreNavbarDivider } from './components/Navbar/divider';
+export { default as ReqoreNavbarGroup } from './components/Navbar/group';
+export { default as ReqoreNavbarItem } from './components/Navbar/item';
 export { default as ReqoreNotificationsWrapper } from './components/Notifications';
 export { default as ReqoreNotification } from './components/Notifications/notification';
 export { default as ReqorePopover } from './components/Popover';