Added base navigation

Author: EranNL

.eslintrc

@@ -15,7 +15,7 @@
         "node": true,
         "es6": true
     },
-    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js"],
+    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js", "www"],
     "rules": {
         "comma-dangle": "off",
         "class-methods-use-this": "off",

src/components/Navigation/Horizontal/Divider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;

src/components/Navigation/Horizontal/List.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;

src/components/Navigation/Horizontal/ListItem.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list-item',
+            active && 'active',
+            className
+        )}
+    >
+        {icon && (
+            <div className="vertical-navigation-list-item-icon">
+                {icon}
+            </div>
+        )}
+        {children}
+    </div>
+));
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;

src/components/Navigation/Navigation.tsx

@@ -15,20 +15,16 @@ const Navigation = React.forwardRef<HTMLElement, NavigationProps>((
     },
     ref
 ): React.ReactElement => (
-    <Panel
-        className="navigation"
+    <nav
+        ref={ref}
+        className={clsx(
+            'navigation-list',
+            sticky && 'navigation-sticky',
+            className
+        )}
     >
-        <nav
-            ref={ref}
-            className={clsx(
-                'navigation-list',
-                sticky && 'navigation-sticky',
-                className
-            )}
-        >
-            {children}
-        </nav>
-    </Panel>
+        {children}
+    </nav>
 ));
 
 Navigation.displayName = 'PageNavigation';

src/components/Page/Page.tsx

@@ -1,18 +1,36 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import PageHeader from '@/components/Page/Header';
 import PageContent from '@/components/Page/Content';
 import PageMain from '@/components/Page/Main';
 import Side from '@/components/Page/Side';
+import PageRight from '@/components/Page/PageRight';
+import PageLeft from '@/components/Page/PageLeft';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import PageSide from '@/components/Page/Side';
 
 export interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     sticky?: boolean;
 }
 
-const Page = ({
+export interface PageStatics {
+    Right: typeof PageRight;
+    Left: typeof PageLeft;
+    Header: typeof PageHeader;
+    Content: typeof PageContent;
+    Side: typeof PageSide;
+    Main: typeof PageMain;
+}
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Card is missing above CardStatics  properties. These will defined after the card component
+// is defined.
+// @ts-ignore
+const Page: ForwardComponentWithStatics<HTMLDivElement, PageProps, PageStatics> = React.forwardRef(({
     children,
     className,
-}: React.PropsWithChildren<PageProps>): React.ReactElement => (
+}): React.ReactElement => (
     <div
         className={clsx(
             'page',
@@ -21,11 +39,18 @@ const Page = ({
     >
         {children}
     </div>
-);
-
+));
+Page.displayName = 'Page';
+Page.Right = PageRight;
+Page.Left = PageLeft;
 Page.Header = PageHeader;
 Page.Content = PageContent;
 Page.Side = Side;
 Page.Main = PageMain;
 
+Page.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
 export default Page;

src/components/Page/PageLeft.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageLeft = React.forwardRef<HTMLDivElement, PageLeftProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.LEFT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageLeft.displayName = 'PageLeft';
+PageLeft.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+    variant: PropTypes.string
+}
+
+export default PageLeft;

src/components/Page/PageRight.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageRightProps extends React.HTMLAttributes<HTMLDivElement> {
+    spaced?: boolean;
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageRight = React.forwardRef<HTMLDivElement, PageRightProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.RIGHT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageRight.displayName = 'PageRight';
+PageRight.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+
+}
+
+export default PageRight;

src/components/Page/Side.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Panel, Variant } from '@/components';
+import { Variant } from '@/components';
 
 export enum Position {
     LEFT = 'left',
@@ -10,7 +10,6 @@ export enum Position {
 
 export interface PageSideProps extends React.HTMLAttributes<HTMLDivElement> {
     position?: Position | string;
-    spaced?: boolean;
     fixed?: boolean;
     variant?: Variant | string;
 }
@@ -20,33 +19,28 @@ const PageSide = React.forwardRef<HTMLDivElement, PageSideProps>((
         children,
         className,
         position,
-        spaced,
         fixed,
-        variant
     },
     ref
 ): React.ReactElement => (
-    <Panel
+    <div
         ref={ref}
         className={clsx(
             'page-side',
             position && `page-side-${position}`,
             fixed && 'page-side-fixed',
             className
         )}
-        spaced={spaced}
-        variant={variant}
     >
         {children}
-    </Panel>
+    </div>
 ));
 
 PageSide.displayName = 'Side';
 PageSide.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     position: PropTypes.string,
-    spaced: PropTypes.bool,
     fixed: PropTypes.bool,
     variant: PropTypes.string
 }

src/style/base/_typography.scss

@@ -142,3 +142,7 @@ h6 {
 .text-secondary {
     color: variables.color('gray', 'default');
 }
+
+.text-center {
+    text-align: center;
+}